一个标签应用三个背景图片 -- CSS/HTML -- IT技术博客大学习 -- 共学习 共进步！
source link: https://blogread.cn/it/article/479?f=hot1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
一个标签应用三个背景图片
正确来说这并不算是什么新鲜技术,早在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或以下则完全不支持伪元素。
建议继续学习：
扫一扫订阅我的微信号：IT技术博客大学习
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK