剖析

下面两个图次要由文字、图片、背景组成。
第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>