CSS图像替换技术之Rundle的方案
以下内容摘自《CSS禅意花园》一书,略有删减。
设计师Mike Rundle提出了一中使用负text-indent属性值的方法,将文本推到屏幕的左边缘之外,代码简洁优雅。
HTML代码:
<h3 id="header">Apple pie with cheddar?!</h3>
CSS代码:
#header{
text-indent:-5000px;
background:url(sample-image.gif) no-repeat;
height:25px;
}
text-indent:-5000px;
background:url(sample-image.gif) no-repeat;
height:25px;
}
优点:屏幕阅读器可正常访问;没有多余的<span>;简洁优雅的CSS。
缺点:并没有解决浏览器禁用图像后空白页面的可访问性问题。
浏览器支持:
Windows——IE 5.5及以上版本、Netscape 7、Opera 6及以上版本、FireFox;
苹果机——IE 5.2、Safari、FireFox。
点击这里查看其他图像替换方案。