CSS图片替换文字小技巧

今天做网站时碰到一个问题,一个PS设计好的导航字体在html中没有,但设计人员又不想换字体,而SEO人员又不希望用图片做导航,因为图片导航对搜索引擎不友好。类似的问题应该在做网站的时候经常会遇到。解决方法就是用css实现图片替换文字,同时又不失去文字:

<style type=”text/css”>
h2 {
width: 150px;
height: 35px;
position: relative;
}
h2 span {
background: url(hello_world.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
</style>

<h2>
<span></span>Hello World
</h2>

思路是:首先,将 H2 的 position 设为 relative ,这样将使 H2 里面的元素定位以 H2 为参照,然后将 SPAN 元素绝对定位, 撑满整个 H2 区域,同时将背景图应用在 SPAN 标签里面;这种方法的原理是将 SPAN 标签覆盖在文字内容上面,一旦 SPAN 里面的背景图 无法显示,将显示下层的文字内容,不影响正常使用。

但是,此方法也有一个缺陷,就是背景图不能透明,否则将透出下面的文字。 language translated in spanishнастенно потолочный светильник

Leave a Comment