html 多重背景,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()

代码实现

.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;

}

Apartment
For You

There are many variations of passages of Lorem Ipsum available

Properties

There are many variations of passages of Lorem Ipsum available