特殊需求:
在日常开发中,有些时候往往只需要一张特别大的图片作为背景图即可,但一些特殊情况下,我们不得不用一些小图凑成一张特别的大背景图
别问我为什么,业务需要。
image那么如何去实现呢?
有些人可能会使用一堆空的容器,然后分别放每个背景,然后定位或是怎样,然后把它凑到一起。
不不不,太low了。
完全可以一个容器添加多个背景图
请看:
.box{
height: 100%;
background: url("../static/img/you (1).gif") no-repeat top right,
url("../static/img/you (5).gif") no-repeat top left,
url("../static/img/zuo (3-1).png") repeat-x top right,
url("../static/img/b.png") repeat-x center bottom;
}
[图片上传失败...(image-78e481-1602207097346)]
多个图片之间用逗号连接,最后一位用分号。
其余写法就和正常的背景一样,图片、平铺、背景图位置
这里要注意的是,多个背景图的重叠部分,先写的背景图会覆盖后写的,优先级高。
所以涉及到重叠地方,大家多注意一下。
效果图的话,emmm,设计隐私,就不附了。
但是代码亲测有效。
好了,以上就是单容器多背景图效果。
如有问题,请指出,接受批评。
网友评论