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

港控/mmm° 2022-09-16 03:42 231阅读 0赞

<!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-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;

**注意：**

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

举例：

有三张单独的图片：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5q-U54m55biB54ix5aW96ICFMDA3_size_13_color_FFFFFF_t_70_g_se_x_16][]

使用多背景技术实现：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5q-U54m55biB54ix5aW96ICFMDA3_size_16_color_FFFFFF_t_70_g_se_x_16][]

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

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5q-U54m55biB54ix5aW96ICFMDA3_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/3b6c4d1406bc40d7b2c531e99d4a38a3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5q-U54m55biB54ix5aW96ICFMDA3_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/d546992a2f5045a5a1cdc023892553ab.png