CSS 图片替换文字

前端开发仓库

在日常开发中,常常会有一些文字需要用图片来美化,例如 LOGO、栏目标题等。

为了保障可阅读性、搜索优化以及性能优化,我们不方便直接使用 img 标签来加载图片,而是使用 CSS 设置背景图片来达到替换文字的效果。

在此,整理了一些不错的图片替换文字的方法,供大家学习。

伪对象覆盖方法

.afir-pseudo {
  overflow: hidden;
  position: relative;
}
.afir-pseudo:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(img/logo.jpg) no-repeat;
}
.mylogo {
  display: block;
  width: 88px;
  height: 31px;
}
<a class="afir-pseudo mylogo" target="_blank" href="http://ciaoca.com">ciaoca</a>

该方法与 alternatefir 方法类似,使用伪对象来代替多出来的标签,能让图片覆盖文字,也能在图片无法加载时显示文字。

对于不喜图片加载前,页面上显示过多文字的,可以选择使用 Hidden Text 的方法。

不足:不支持 IE7 以下的浏览器。

年代:2014 年

Hidden Text 取代 -9999px 的方法

.hide-text {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
.mylogo {
  display: block;
  width: 88px;
  height: 31px;
  background: url(img/logo.jpg) no-repeat;
}
<a class="hide-text mylogo" target="_blank" href="http://ciaoca.com">ciaoca</a>

该方法作者提出使用 text-indent:-9999px 隐藏文字时,浏览器需要绘制一个 9999px 的画面比较消耗性能。并发明了这种此方法,性能更好。

不足:图片无法加载时,不能显示文字。

年代:2012 年

来源:http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Malarkey Image Replacement (MIR)

.mir {
  text-indent: -9999px;
}
.mylogo {
  display: block;
  width: 88px;
  height: 31px;
  background: url(img/logo.jpg) no-repeat;
}
<a class="mir mylogo" target="_blank" href="http://ciaoca.com">ciaoca</a>

该方法通过属性 text-indent 设置一个较大的值,使文字超出显示器的边界,达到隐藏文字的效果。

不足:图片无法加载时,不能显示文字。

年代:2005 年

来源:http://www.stuffandnonsense.co.uk/archives/examples/malarkey-method-example.html

Alternate Fahrner Image Replacement (alternatefir)

.afir {
  overflow: hidden;
  position: relative;
}
.afir span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(img/logo.jpg) no-repeat;
}
.mylogo {
  display: block;
  width: 88px;
  height: 31px;
}
<a class="afir mylogo" target="_blank" href="http://ciaoca.com">
  <span></span>
  ciaoca
</a>

该方法通过在内部增加一个空标签来加载图片,并使用绝对定位来遮挡住文字。这既解决了图片替代文字,也解决了在图片不能加载时,依然能显示文字的良好体验。

不足:需要放置一个空标签

年代:2004 年

来源:http://levinalex.net/files/20030809/alternatefir.html

Stuart Langridge Image Replacement (LIR)

.lir {
  overflow: hidden;
  height: 0;
}
.mylogo {
  display: block;
  width: 88px;
  padding-top: 31px;
  /* 该值为替代图片的高度 */
  background: url(img/logo.jpg) no-repeat;
}
<a class="lir mylogo" target="_blank" href="http://ciaoca.com">ciaoca</a>

该方法将 height 设置为 0,再使用 padding-top 撑开容器,使文字超出容器的边界,达到隐藏文字的效果。

不足:图片无法加载时,不能显示文字。

年代:2003 年

来源:http://www.kryogenix.org/code/browser/lir/

Fahrner Image Replacement (FIR)

.fir {
  display: block;
  width: 88px;
  height: 31px;
  background: url(img/logo.jpg) no-repeat;
}
.fir a {
  display: none;
}
<a class="fir" target="_blank" href="http://ciaoca.com">
  <span>ciaoca</span>
</a>

这是一个很古老的方法,现在应该很少使用这种方法,但在早期做出了贡献,让我们向他致敬吧。

不足:

需要 2 个标签完成;

图片无法加载时,不能显示文字。

年代:2003 年

来源:http://www.alistapart.com/articles/fir/