css3 background 分别设置多个背景图片

css3 background 分别设置多个背景图片

ID:10278278

大小:93.89 KB

页数:5页

时间:2018-06-14

css3 background 分别设置多个背景图片_第1页
css3 background 分别设置多个背景图片_第2页
css3 background 分别设置多个背景图片_第3页
css3 background 分别设置多个背景图片_第4页
css3 background 分别设置多个背景图片_第5页
资源描述:

《css3 background 分别设置多个背景图片》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、CSS3允许给box/div元素设置多个背景图片,只需要在原来的基础上加逗号分隔即可分别设置。支持MozillaFirefox(3.6+),Safari/Chrome(1.0/1.3+),Opera(10.5+),InternetExplorer(9.0+)等。先上一个小例子,一只羊的png图片背景和草原的大背景可以分别设置。效果如下:代码如下:XHTML1234567#example1{width:500px;height:250px;background-image:url(sheep.png),url(betweengr

2、assandsky.png);background-position:center bottom,left top;background-repeat:no-repeat;}它是如何工作的呢?多个背景图片可以通过单个的设置,以逗号分隔后,会分别识别单个的背景图片属性来加以设置,逗号在此起的作用相当于制造一个并集而非简单的覆盖。相当于Photoshop中图层的概念,优先级取决于你添加背景图片的顺序。语法:XHTML1234background-image:  [,  ]* 

3、e> =  

4、noneNote:avalueof‘none’stillgeneratesalayer.实例介绍:XHTML1background-image:url(sheep.png),url(betweengrassandsky.png);CSS3中加以此逗号同样支持以下属性:1.background-repeat2.background-attachment3.background-position, 4.background-clip,5.background-origi

5、n 6.background-size.源码例子:XHTML1background-position:center bottom,left top;逗号分隔的属性,会从头到脚一一地匹配,假设参数过少,则会使用最后末尾的属性来填充。假设参数过多,则会自动舍弃,不予理会。background的速记短语法同样支持!XHTML1234567background: [  ,]*    =  

6、

7、  [/ 

8、> ]?

9、

10、  

11、

12、 

13、

14、 {1,2}   =  

15、

16、  [/  ]?

17、

18、  

19、

20、 

21、

22、 {1,2}

23、

24、  Note:background-colorisonlypermittedinthefinalba

25、ckgroundlayer.实例介绍:XHTML1background:url(sheep.png)center bottom no-repeat,url(betweengrassandsky.png)left top no-repeat;浏览器兼容性:支持目前主流浏览器及支持css3标准的所有浏览器。例如:MozillaFirefox(3.6+),Safari/Chrome(1.0/1.3+),Opera(10.5+),InternetExplorer(9.0+)等。更多实例介绍:Exampl

26、eAXHTML12345678910111213#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;}or: #exampleA{width:500px;height:250px

27、;background:url(decoration.png)left top no-repeat,url(ribbon.png)right bottomno-repeat,url(old_paper.jpg)left top no-repeat;}14ExampleBXHT

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。