参考豆瓣
优点,seo-friendly;与text-indent: -5000px;相比,选择图片并复制可以复制到文字
缺点,当图片未能显示时,一片空白,没有文字
期待完美的解决方案:
不用js,不用额外标签,不用img标签,背景图片采用sprite方案,图片不能显示时,要能显示文字,最好能复制粘贴成文字
不过这个完美的方案估计不存在。。。
<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>
1 楼
cuixiping
2011-01-04
zycbob 写道
缺点,当图片未能显示时,一片空白,没有文字
这个没有js肯定搞不定吧?
2 楼
Tangoboy
2011-01-04
.lnk-book{color:transparent;}
/*或者*/
.lnk-book{color:rgba(0,0,0,0);}
/*IE9以下不适用*/
/*http://www.cnblogs.com/tangoboy*/
/*或者*/
.lnk-book{color:rgba(0,0,0,0);}
/*IE9以下不适用*/
/*http://www.cnblogs.com/tangoboy*/
3 楼
linfanne
2011-01-05
代码量 大好多。 也就LOGO 用这个 表现丰富一下吧,呵呵 早就开始用了
4 楼
boygirl
2011-01-07
正常下不会用这种方式吧?还是通用点好
5 楼
jorneyR
2011-01-10
AJAX异步加载图片,加载完成就替换掉文字,也可以这么处理