文档详情

CSS3 background 分别设置多个背景图片[精].docx

发布:2017-01-17约字共5页下载文档
文本预览下载声明
CSS3允许给box/div元素设置多个背景图片,只需要在原来的基础上加逗号分隔即可分别设置。支持 Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ,Internet Explorer (9.0+) 等。先上一个小例子,一只羊的png图片背景和草原的大背景可以分别设置。效果如下:代码如下:XHTML1234567#example1{width:500px;height:250px;background-image:url(sheep.png),url(betweengrassandsky.png);background-position:center?bottom,left?top;background-repeat:no-repeat;}它是如何工作的呢?多个背景图片可以通过单个的设置,以逗号分隔后,会分别识别单个的背景图片属性来加以设置,逗号在此起的作用相当于制造一个并集而非简单的覆盖。相当于Photoshop中图层的概念,优先级取决于你添加背景图片的顺序。语法:XHTML1234background-image:?bg-image?[ ,?bg-image?]*?bg-image?=?image?| nonestrongNote: a value of ‘none’ still generates a layer./strong实例介绍:XHTML1background-image:url(sheep.png),url(betweengrassandsky.png);CSS3 中加以此逗号同样支持以下属性:background-repeatbackground-attachmentbackground-position,?background-clip,background-origin?background-size.源码例子:XHTML1background-position:center?bottom,left?top;逗号分隔的属性,会从头到脚一一地匹配,假设参数过少,则会使用最后末尾的属性来填充。假设参数过多,则会自动舍弃,不予理会。background的速记短语法同样支持!XHTML1234567background:?[?bg-layer?, ]*?final-bg-layer??bg-layer?=?bg-image?||?bg-position?[ /?bg-size?]? ||?repeat-style?||attachment?||?box{1,2}??final-bg-layer?=?bg-image?||?bg-position?[ /?bg-size?]? ||?repeat-style?||attachment?||?box{1,2} ||?background-color?spanstyle=color: #993300;strongNote: background-color is only permitted in the final background layer./strong/span实例介绍:XHTML1background:url(sheep.png)center?bottom?no-repeat,url(betweengrassandsky.png)left?top?no-repeat;浏览器兼容性:支持目前主流浏览器及支持css3标准的所有浏览器。例如: Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ,Internet Explorer (9.0+) 等。更多实例介绍:Example AXHTML1234567891011121314#exampleA{width:500px;height:250px;background-image:url(decoration.png),url(ribbon.png),url(old_paper.jpg);background-repeat:no-repeat;background-position:left?top,right?bottom,left?top;}strongor:/strong?#exampleA{width:500px;height:250px;background:url(decoration.png)left?top?no-repeat,url(ribbon.png)right?bottomno-repeat,url(old_paper.jpg)left?top?no-repeat;}Example BXHTML1234567891011121314
显示全部
相似文档