CUED-迅雷用户体验设计中心

伪元素与图片替换

wanfor | 2011-09-20 | 网页重构

利用CSS伪元素选择器实现渐进增强的图片替换方式

WeBrebuild年会上分享的一点内容,知识点的内容就不作过多阐述了,如果你完全不了解伪元素那么建议先看一下官方伪元素选择器的资料,或者自行谷歌了解,有兴趣可以去看下这篇文章:使用伪元素实现CSS图片替换(NIR),对于图片替换有比较详细的介绍和追溯 。

先看一下通用的图片替换方法:Demo1

什么问题呢,文字被隐藏了,直接导致的结果就是当图片加载失败或者网速慢图片无法很快加载的时候,用户不知道这块区域的内容是什么,有什么功能。

为了避免出现这样的状况,文字就不能被隐藏,图片也不能直接定义成元素的背景图片,而需要另外一个标签来包含图片进而覆盖文字。

在IE6\7和低版本的chrome、FF等浏览器里确实是这样,但在对伪元素选择器完美支持的浏览器下,我们只需要让伪元素来完成这个工作。

使用伪元素来实现图片替换有两种方法:

1、利用content将图片直接放到伪元素选择器里,看Demo2

2、绝对定位伪元素,将图片定义成背景Demo3

两种方法的利弊对比:

  content包含图片 定义成背景图片
display属性 inline-block block
透明图片 支持 不支持
定义宽高 不需要 需要
图片加载失败时 会显示无图片的图标 什么都没有完美展示文字
IE浏览器兼容性 IE8支持 IE8文字会跑到图片上面

最后做了个针对IE6\7使用文字隐藏,IE8和高级浏览器使用伪元素的渐进增强 伪元素图片替换Demo

如果你的项目中有对IE另外书写CSS文件可以把CSS分离开来,这里我直接使用hack完成了这个工作。

实际项目中还是依照情况选择最优的方法来处理,对于比较重要的内容可以采用添加空标签的方法,这样即使在低版本IE中图片加载出现问题了也能保证内容。

有兴趣也可以看下图片引用错误的Demo:Demo-noimages

 

相关参考链接:

http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/demo

http://www.mezzoblue.com/tests/revised-image-replacement/

Pseudo-Elements Selectors 伪元素选择符

  1. […] http://cued.xunlei.com/log016 上一篇: 快乐触手可及——(V3)欢乐斗地主设计分享 下一篇: […]

  2. 谢谢,收藏一下。

  3. Nancy 说:

    很好,支持下

  4. 方法是好,但是不支持ie6呀。。ie6图片不显示。

    • hidoos 说:

      我觉得这种地方,不支持ie6救不支持吧,权当优雅降级吧。不过,话说,也可以用js动态去生成一个dom节点,来模拟 伪元素的。

  5. I got what you plan, thanks for putting up. Woh I am happy to gestate this website finished google. Thanks For Share 伪元素与图片替换 – CUED-迅雷用户体验设计中心.

  6. 想飞 说:

    不错哦,我是来偷师滴~~

  7. 威化饼 说:

    这种方法不错,语义标准,但IE下仍没有解决图片不加载带来的空白问题。还有另一种方法是是:用空标签加载背景图片,浮动到文字上方遮挡文字,好处是可以更好的解决图片不加载问题,坏处是加了空标签破坏了语义,请问大家觉得哪种方法更好,为什么呢?
    附上另一种做法:
    <a href="#" style="position:relative; display:inline-block; width:270px; height:129px;">文字文字<s style="position:absolute; top:0; left:0; width:100%; height:100%; background:url(http://www.baidu.com/img/baidu_sylogo1.gif)"></s></a>
     

  8. It’s a good shame you don’t contain a donate button! I’d most certainly donate to this fantastic web site! That i suppose for the moment i’ll be happy with bookmarking together with incorporating an individual’s Rss feed that will my best Msn balance. That i appearance forward that will recent updates and definitely will share the web site utilizing my best Facebook or twitter group:

  9. 好东西,谢谢分享

  10. 强龙网 说:

    闲来观光。。。不错。。学习了。。

  11. 蓝色狂想 说:

    很不错,收藏了,迅雷很强啊。

  12. 阿金 说:

    这真不是一片好文章。ie 6/7不支持翻译过来就比较牵强了。
    不过伪元素h1:before{content:url(123.mp3);}倒是可以学习一下

  13. 必答网 说:

    好专业呀! 强悍

  14. 乌帮图 说:

    好专业啊,学习了。

  15. 代购网 说:

    很这种方式实现不错,很有韵味~~

  16. 草上飞 说:

    谢谢共享:)

  17. candychen 说:

    我来支持一下,什么时候再有交流会啊?

  18. 啃啃MIKE 说:

    不错的文章,学习了。

  19. 乏Feed 说:

    谢谢!收藏了!

发表你的评论