美文网首页
css实现一个容器多背景图效果

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

作者: 坏丶毛病 | 来源:发表于2020-10-09 09:35 被阅读0次

    特殊需求:

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

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

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

    但是代码亲测有效。

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

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

    相关文章

      网友评论

          本文标题:css实现一个容器多背景图效果

          本文链接:https://www.haomeiwen.com/subject/vdakpktx.html