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;
注意:
- 用逗号隔开每组
background
的缩写值; - 如果有
size
值,需要紧跟position
并且用 “/” 隔开; - 如果有多个背景图片,而其他属性只有一个(例如
background-repeat
只有一个),表明所有背景图片应用该属性值。 background-color
只能设置一个。
举例:
有三张单独的图片:
使用多背景技术实现:
实现代码:
.demo{ width: 300px; height: 140px; border: 1px solid #999; background-image: url(https://media.mybj123.com/wp-content/uploads/2021/08/1627980082-32d846a68e283f2.png), url(https://media.mybj123.com/wp-content/uploads/2021/08/1627980102-2ce0adcdfb8c726.png), url(https://media.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
码云笔记 » 13. CSS3背景 multiple backgrounds