原始链接http://tech.idv2.com/2007/08/14/image-replacing/以及本声明。
又懒了一下,好几天没更新了。其实上周买的书到了,这几天在忙着看书,没顾得上研究技术。昨天一口气看完了《CSS禅意花园》,觉得这本书不愧CSS设计的王者称号,无论从欣赏还是学习的角度,这本书都值得一读。
当然,原书网站CSS Zen Garden也一定要去看看。
今天先来介绍一个从这本书上学到的小技巧:如何用图片替换文字。
所谓图片替换文字就是用图片代替HTML中的某个文字元素,如标题。网站设计中很常用,比如我想用图片而不是文字来显示blog标题,我可以在本应当显示<h1>的地方显示一个<img>,但这样页面中失去<h1>会影响搜索引擎评分。当然我也可以通过css给<h1>设置一个背景图片,但<h1>内的文字必须显示,否则也会影响搜索引擎评分。可以使用下面的方法之一来通过CSS完美解决。
Fahrner图像替换(Fahrner Image Replacement, FIR)
该技巧由设计师Douglas Bowman在2003年3月首次发布。该技巧的实现方法如下:用span将要替换的文本包围起来,再通过css隐藏这个span即可。例如,HTML文本如下:
<h1 id="blogtitle"><span>idv2</span></h1>
可以通过以下的CSS实现替换:
#blogtitle { background: url(img/title.png) top left no-repeat; width: 348px; height: 25px;}#blogtitle span { display: none;}
上面这个技巧的优点在于代码简单、兼容性好,但如果浏览器设置为不显示图片却使用CSS,那么<h1>的地方就会一片空白。
实际上这个方法是一切图像替换方法的基础,随着技术的发展,更好的图像替换方法出现了。
通过height属性实现
该方法由Seamus Leahy和Stuart Langridge发现。
HTML代码:
<h1 id="blogtitle">idv2</h1>
CSS代码:
#blogtitle { padding: 25px 0 0 0; overflow: hidden; background: url(img/title.png) top left no-repeat; height: 0px !important; height /**/: 25px;}
该方法的要点是:设置height为0px并通过 !important 属性确保它不会被覆盖,同时使用padding-top属性设置实际的显示高度。
由于IE的盒模型显示bug,需要使用hack(上述的/**/部分)。这里关键的是 height /**/ 的值要和padding-top设置为相同。
这个方法可以在IE5.0及以上版本、Netscape 7、Opera 6以及以上版本、Firefox、IE5.2(Mac)、 Safari上使用。优点是不需要多余的<span>;缺点是依然没有解决浏览器禁用图像时的空白问题。
通过text-indent属性实现
该方法由Mike Rundle提出,可以说是最简单实用的方法了。
HTML代码:
<h1 id="blogtitle">idv2</h1>
CSS代码:
#blogtitle { text-indent: -5000px; background: url(img/title.png) top left no-repeat; height: 25px;}
其思路就是用负的text-indent属性将文字移动到屏幕之外。
这个方法可以在IE5.0及以上版本、Netscape 7、Opera 6以及以上版本、Firefox、IE5.2(Mac)、 Safari上使用。优点是不需要多余的<span>、CSS简单;缺点是依然没有解决浏览器禁用图像时的空白问题。
较为复杂但完美的方法
Levin Alexander提出了一个能够解决浏览器禁用图像时的空白问题的方法。就是不再将文本放在<span>内,而是从<span>中移出来,和<span>一起放在父元素中,然后将背景图像应用在这个<span>上,并用该<span>盖住文字。这样就可以解决浏览器禁用图像的问题,但缺点就是不能使用透明图像(否则被遮盖的文字会露出来),而且CSS代码也较为繁琐。
由于代码较长,在这里就不写了,有兴趣的可以去参考《CSS禅意花园》这本书。