当 UI 给你如下图的设计稿时你会怎么切图呢？是除文字局部全副切下来，还是只切小房子、建筑物局部？

如果你的抉择是 除文字局部全副切下来，那你就有必要往下看了

剖析

下面两个图次要由 文字 、 图片 、 背景 组成。
第 1 张图比较简单：文字 + 图片 + 突变背景
第 2 张图略微简单：文字 + 背景图片 + 突变背景
对于 css 背景的应用很多同学都感觉它只能繁多应用，如：background: #fff、background: url(xxx.jpg)、background: linear-gradient()

其实它是能够组合应用的，如：
background: #fff url(xxx.jpg)
background: linear-gradient(), url(xxx.jpg)
background: linear-gradient(), linear-gradient()

代码实现

<style>
.box1{
    display: flex;
    padding: 30px 20px;
    border-radius: 375px 0 0 375px;
    margin-bottom: 50px;
    background: radial-gradient(at 101% 77%, #5E11B4, #C11DCF);
}
.box1 figure{
    padding-top: 10%;
    padding-left: 5%;
    margin-right: 1rem;
    color: #fff;
}
.box1 figurecaption{
    margin-bottom: 1rem;
    font-size: 3rem;
    font-weight: 600;
}
.box1 img{
    display: block;
    width: 700px;
    max-width: 100%;
    margin-left: auto;
}
    
.box2{
    height: 520px;
    border-radius: 0 360px 360px 0;
    color: #fff;
    text-align: center;
    /* 应用多个背景来达到还原设计稿的成果 */
    background: linear-gradient(to right, rgba(200,35,180,0.8), 
                    rgba(136,42,208,0.8)),
            url('./property-bg.jpg');
    background-size: cover;
    background-position: 0 0;
}
.box2 h3{
    padding-top: 10%;
    font-size: 3rem;
}
</style>

<div class="box1">
    <figure>
    <figurecaption>
        Apartment <br> For You
    </figurecaption>
    <p>There are many variations of passages of Lorem Ipsum available</p>
    </figure>
    <img src="./slider-img.png" alt="">
</div>

<div class="box2">
    <h3>Properties</h3>
    <p>There are many variations of passages of Lorem Ipsum available</p>
</div>