IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

一个标签应用三个背景图片

Gulu77 2009-11-08 21:46:50 累计浏览 3,525 次
本机暂存

    正确来说这并不算是什么新鲜技术,早在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或以下则完全不支持伪元素。

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  2. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
  3. 各公司对前端开发的职位描述 (累计阅读 10,405)
  4. iframe大小自适应 (累计阅读 10,057)
  5. 浏览器的渲染原理简介 (累计阅读 8,377)
  6. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,357)
  7. 程序员眼里IE浏览器是什么样的 (累计阅读 8,011)
  8. 2010网页设计趋势 (累计阅读 7,818)
  9. Web前端工程师编程能力飞升之路 (累计阅读 7,691)
  10. 颜色的代码表达式 (累计阅读 7,665)