在日常开发中，常常会有一些文字需要用图片来美化，例如 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 年
.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/
.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
.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 年
.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 年
.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 年