一个标签应用三个背景图片
浏览:2256次 出处信息
正确来说这并不算是什么新鲜技术,早在CSS2.0出现伪对象(Pseudo-Elements)时候就已经可以令一个标签应用三个背景图片,只不过是某些低版本浏览器对其支持不完善,而导致这技术在国内几乎无人使用。对于伪对象能轻易地完成三个背景图片的任务,而且玩法灵活多变。
实例
Opera、Safari能完美地支持以下实例,Firefox2.0/3.0 及IE8 就显得有比较逊色了
例子1:http://blog.gulu77.com/demo/200807/Pseudo-Elements1.html
一些更高级的应用,为伪元素添加定位及伪类,参考例2:
例子2:http://blog.gulu77.com/demo/200807/Pseudo-Elements2.html
原理
使用:after及:before伪元素配合content在对象前或后显示内容,利用display:block使伪元素内容转为块状,最后插入背景图片。
相关属性清单:
:before - 用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容:after - 用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容content - 用来和:after及:before 伪元素一起使用,在对象前或后显示内容优点
不必添加多余的标签,而能应用多个背景图片。使代码更简洁更具语言化,而实现更复杂的效果。
缺点
经过测试,只有Opera、Safari、完美支持,而Firefox2.0/3.0难以实现伪元素的stacking context(层级内容)控制,在IE8只支持背景颜色而不支持背景图片,IE7或以下则完全不支持伪元素。
建议继续学习:
- 浏览器对居中的背景图片的兼容性 (阅读:2770)
- 一张背景实现自适应九宫格 (阅读:2557)
- 缩小窗口<body>背景被裁掉 (阅读:2391)
- 两侧背景自动延伸的CSS实现方法 (阅读:2348)
- 渐变背景上的内容垂直居中 (阅读:2272)
- 消失的列表背景 (阅读:2153)
- 改善IE6中a与a:hover的背景支持 (阅读:1977)
- 无缝背景的推荐 (阅读:1984)
- 页面元素的背景及boder被裁掉 (阅读:1902)
- CSS Gradient详解 (阅读:1425)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:CSS的渲染效率
后一篇:CSS让你的IE浏览器崩溃 >>
文章信息
- 作者:Gulu77 来源: Gulu77
- 标签: 背景
- 发布时间:2009-11-08 21:46:50
建议继续学习
近3天十大热文
- [53] IOS安全–浅谈关于IOS加固的几种方法
- [52] 如何拿下简短的域名
- [51] 图书馆的世界纪录
- [50] android 开发入门
- [50] Oracle MTS模式下 进程地址与会话信
- [49] Go Reflect 性能
- [46] 【社会化设计】自我(self)部分――欢迎区
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [36] 程序员技术练级攻略
- [29] 视觉调整-设计师 vs. 逻辑