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