首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-11-03 
豆瓣采用的背景图替换文字方法参考豆瓣优点,seo-friendly;与text-indent: -5000px相比,选择图片并复制可

豆瓣采用的背景图替换文字方法
参考豆瓣
优点,seo-friendly;与text-indent: -5000px;相比,选择图片并复制可以复制到文字
缺点,当图片未能显示时,一片空白,没有文字

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

<a href="http://book.douban.com" 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>
5 楼 jorneyR 2011-01-10   AJAX异步加载图片,加载完成就替换掉文字,也可以这么处理

热点排行