13. 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;

注意：

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

举例：

有三张单独的图片：

使用多背景技术实现：

实现代码：

.demo{
    width: 300px;
    height: 140px;
    border: 1px solid #999;
    
    background-image: url(https://mybj123.com/wp-content/uploads/2021/08/1627980082-32d846a68e283f2.png),
                      url(https://mybj123.com/wp-content/uploads/2021/08/1627980102-2ce0adcdfb8c726.png),
                      url(https://mybj123.com/wp-content/uploads/2021/08/1627980152-4056c5709dc1642.png);
    background-position: left top, 100px 0, 200px 0;
    background-repeat: no-repeat, no-repeat, no-repeat;
    
    margin:0 0 20px 0;
}

以上关于13. CSS3背景 multiple backgrounds的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。