CSS多重背景还原设计稿

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

CSS多重背景还原设计稿_第1张图片

如果你的选择是除文字部分全部切下来,那你就有必要往下看了

分析

上面两个图主要由文字图片背景组成。
第1张图比较简单:文字+图片+渐变背景
第2张图稍微复杂:文字+背景图片+渐变背景
对于css背景的使用很多同学都觉得它只能单一使用,如:background: #fffbackground: url(xxx.jpg)background: linear-gradient()

其实它是可以组合使用的,如:
background: #fff url(xxx.jpg)
background: linear-gradient(), url(xxx.jpg)
background: linear-gradient(), linear-gradient()

代码实现



Apartment
For You

There are many variations of passages of Lorem Ipsum available

Properties

There are many variations of passages of Lorem Ipsum available

你可能感兴趣的:(CSS多重背景还原设计稿)