【CSS3】CSS3多重背景 multiple backgrounds的使用总结

<!--
    多重背景的两种方式：
        第一种：使用background属性,每个逗号隔开都代表一个独立背景图片及样式特性
        第二种：使用【background+具体属性】特殊属性,根据每个属性【对应的顺序】来配置每个图片的特性
-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多重背景</title>
    <style type="text/css">
        .demo{
            width: 1000px;
            height: 600px;
            border: 10px solid #999;

            /*

                基于单个属性,按照对应的顺序来配置每个图片的特性
                    background-image:url1,url2,...,urlN;
                    background-repeat : repeat1,repeat2,...,repeatN;
                    backround-position : position1,position2,...,positionN;
                    background-size : size1,size2,...,sizeN;
                    background-attachment : attachment1,attachment2,...,attachmentN;
                    background-clip : clip1,clip2,...,clipN;
                    background-origin : origin1,origin2,...,originN;
                    background-color : color;
            */
            background-image: url(https://www.imooc.com/static/img/index/logo2020.png),
            url(https://www.imooc.com/static/img/index/logo2020.png),
            url(https://www.imooc.com/static/img/index/logo2020.png);
            background-position: left top, 100px 100px, 200px 200px;
            background-repeat: no-repeat, no-repeat, no-repeat;

            margin:0 0 20px 0;
        }
        .task {
            width: 600px;
            height: 600px;
            border: 10px solid #999;
            /*
                使用background属性,每个逗号隔开都代表一个独立背景图片及样式特性
                background url1() + 其他属性,url2() + 其他属性,...;
            */
            background:url(https://www.imooc.com/static/img/index/logo2020.png) no-repeat left top,
            url(https://www.imooc.com/static/img/index/logo2020.png) no-repeat 300px 300px;

        }


    </style>
</head>
<body>
<div class="demo"></div>
<div class="task"></div>
</body>
</html>

CSS3背景 multiple backgrounds

多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以把上面的缩写拆解成以下形式：

background-image:url1,url2,...,urlN;

background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;

注意：

用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。

举例：

有三张单独的图片：

使用多背景技术实现：

具体代码实现，查看右侧代码编辑器（12-16行）。

【CSS3】CSS3多重背景 multiple backgrounds的使用总结

CSS3背景 multiple backgrounds

猜你喜欢