css实现一个容器多背景图效果

特殊需求：

在日常开发中，有些时候往往只需要一张特别大的图片作为背景图即可，但一些特殊情况下，我们不得不用一些小图凑成一张特别的大背景图

别问我为什么，业务需要。

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，设计隐私，就不附了。

但是代码亲测有效。

好了，以上就是单容器多背景图效果。

如有问题，请指出，接受批评。