- 1、本文档共5页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
CSS3bqckground分别设置多个背景图片
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
您可能关注的文档
最近下载
- 除颤仪故障应急预案及处理流程.pptx
- 北师大版数学五年级上册全册核心素养目标教学设计.docx
- 鼻窦炎患者的护理PPT课件.ppt
- ISO 9001:2015 国际标准 质量管理体系-要求(英文版).docx
- 经典导读与欣赏 知到智慧树网课答案.pdf
- 2024年高考数学(新高考I卷)真题详细解读及评析.docx
- 中国高血压防治指南(2024年修订版)解读-治疗篇.pptx
- 2022年湘潭大学兴湘学院计算机科学与技术专业《计算机网络》科目期末试卷A(有答案).docx
- 2022年湘潭大学兴湘学院计算机科学与技术专业《计算机网络》科目期末试卷B(有答案).docx
- 24h出入量管理课件.ppt VIP
文档评论(0)