用 CSS 实现图片替换文字

介绍一下Gilder/Levin 的方法

 

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

 

<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 的 position 设为 relative ，这样将使 H2 里面的元素定位以 H2 为参照，然后将 SPAN 元素绝对定位，撑满整个 H2 区域，同时将背景图应用在 SPAN 标签里面；这种方法的原理是将 SPAN 标签覆盖在文字内容上面，一旦 SPAN 里面的背景图无法显示，将显示下层的文字内容，不影响正常使用。但是，此方法也有一个缺陷，就是背景图不能透明，否则将透出下面的文字。