Mysql query error : | SQL : set names utf8 一个标签应用三个背景图片 -- CSS/HTML -- IT技术博客大学习 -- 共学习 共进步！
    技术头条 - 一个快速在微博传播文章的方式     
您现在的位置：首页 --> CSS/HTML --> 一个标签应用三个背景图片

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

浏览:2368次  出处信息

    正确来说这并不算是什么新鲜技术,早在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. 浏览器对居中的背景图片的兼容性    (阅读：2865)
  2. 一张背景实现自适应九宫格    (阅读：2680)
  3. 缩小窗口<body>背景被裁掉    (阅读：2492)
  4. 两侧背景自动延伸的CSS实现方法    (阅读：2414)
  5. 渐变背景上的内容垂直居中    (阅读：2394)
  6. 消失的列表背景    (阅读：2268)
  7. 改善IE6中a与a:hover的背景支持    (阅读：2039)
  8. 无缝背景的推荐    (阅读：2135)
  9. 页面元素的背景及boder被裁掉    (阅读：1999)
  10. CSS Gradient详解    (阅读：1723)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：CSS的渲染效率
后一篇：CSS让你的IE浏览器崩溃 >>
文章信息
  • 作者：Gulu77    来源： Gulu77
  • 标签： 背景
  • 发布时间：2009-11-08 21:46:50
© 2009 - 2025 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1