CSS多重背景还原设计稿

当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>