豆瓣采用的背景图替换文字方法

参考豆瓣
优点，seo-friendly；与text-indent: -5000px;相比，选择图片并复制可以复制到文字
缺点，当图片未能显示时，一片空白，没有文字

期待完美的解决方案：
不用js，不用额外标签，不用img标签，背景图片采用sprite方案，图片不能显示时，要能显示文字，最好能复制粘贴成文字
不过这个完美的方案估计不存在。。。

Html代码  
<a href="http://book.douban.com" class="lnk-book" target="_blank">豆瓣读书</a>  
  
<style>  
.lnk-book {   
    background: url("http://t.douban.com/pics/nav/ui_nav_logo_4.png") no-repeat scroll -177px 0 transparent;   
    display: inline-block; /* 如果是内联元素需要加上这行代码 */   
    width: 100px;   
    height: 24px; /* 定义文字框高度 */   
    font-size: 24px;   
    line-height: 96px; /* 将实际文字排到文字框外(4倍比较安全) */   
    overflow: hidden; /* 隐藏文字框外的实际文字 */   
}   
</style>  

<a href="http://book.douban.com" class="lnk-book" target="_blank">豆瓣读书</a>

<style>
.lnk-book {
    background: url("http://t.douban.com/pics/nav/ui_nav_logo_4.png") no-repeat scroll -177px 0 transparent;
    display: inline-block; /* 如果是内联元素需要加上这行代码 */
    width: 100px;
    height: 24px; /* 定义文字框高度 */
    font-size: 24px;
    line-height: 96px; /* 将实际文字排到文字框外(4倍比较安全) */
    overflow: hidden; /* 隐藏文字框外的实际文字 */
}
</style>

zycbob 写道
缺点，当图片未能显示时，一片空白，没有文字

这个没有js肯定搞不定吧？

.lnk-book{color:transparent;}
/*或者*/
.lnk-book{color:rgba(0,0,0,0);}
/*IE9以下不适用*/

/*http://www.cnblogs.com/tangoboy*/

代码量 大好多。 也就LOGO 用这个 表现丰富一下吧，呵呵 早就开始用了

正常下不会用这种方式吧？还是通用点好

AJAX异步加载图片，加载完成就替换掉文字，也可以这么处理