一种通过伪元素实现的更好的图片替换技术

昨天收到一条垃圾评论,内容是「多更新,要不然还以为您老人家去保卫钓鱼岛了呢」。所以今天说什么也得写一篇证明我还没那么热血。

在过去很长一段时间里,我们都习惯用负值 text-indent 的方法来进行图片替换。在最新的 HTML5 Boilerplate 中,我看到了一种新的图片替换技术。它采用 CSS 伪元素来实现,相对于以前的图片替换技术,它很好的解决一些手机浏览器的 bug,且没有属性覆盖的问题,并且不需要额外的标签。

.ir {
    overflow: hidden;
    *text-indent: -999em;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

在下面的范例中可以看到,伪元素设定为块元素,高度同容器一致,所以把文字顶到第二排去了,再结合 overflow:hidden; 将溢出的部分隐藏掉。面对不支持 :before 伪元素的 IE6/7,采用传统的负值 text-indent 方法。需要注意的是,采用这个图片替换技术后不能再对该元素设置 padding-bottom,否则文字会显示出来一部分。

这个图片替换的技术可以替换所有元素的背景(IE8+),不会出现需要 !important 的情况,对 SEO 非常友好,且向下兼容至 IE6。没有什么学习成本,现在就可以在自己的项目中换上这个技术了。

此条目发表在 前端开发 分类目录,贴了 标签。将固定链接加入收藏夹。

一种通过伪元素实现的更好的图片替换技术》有 6 条评论

  1. Denis 说:

    你竟然没去,太失望了!

  2. 潜行者m 说:

    你竟然没去,太失望了!

  3. Mr.Cong 说:

    你竟然没去,太失望了!

  4. yjl 说:

    可不可以 写一篇文章,告诉我们《使用!important多么糟糕》

  5. Liumy 说:

    请问为什么要用图片替换呢?

  6. Liumy 说:

    谷歌了一下,大概清楚了,它对于残障人士可能更友好,也更利于SEO和一些页面效果。