Html:
<h1 id="fir"><span>Fahrner Image Replacement</span></h1>
CSS:
#fir {
width: 287px;
height: 29px;
background: url(fir.gif) no-repeat;
}
#fir span {
display: none;
}
解释:
首先添加一个<span>标签,然后使用<span>标签的display属性把文字隐藏起来,最后指定<h1>的背景图片。
优点:使用CSS而不是标记语法提供图片,更改图片只需更改CSS。
缺点:(1)需要一组不具备任何语义的<span>标签才能运作(2)display属性影响屏幕阅读器使用者(3)关闭浏览器显示图片,同时启用CSS支持时,文字图片均不可显示。