CSS图像替换技术的几种方案介绍

2020-05-11 09:14:32易采站长站整理

缺点:无法使用透明图像;CSS代码较为冗长。

Leahy和Langridge的方案:
Seamus Leahy和Stuart Langridge均独立地发现了这种方法。该方法让我们不必再添加那些多余的<span>标签,且在保证屏幕阅读器可以正常阅读文本的同时,也能在页面中隐藏元素中的内容。

HTML代码:

XML/HTML Code复制内容到剪贴板

<h3 id="header">I like cola.</h3>  

CSS代码:

CSS Code复制内容到剪贴板

#header{   
padding:25px 0 0 0;   
overflow:hidden;   
background:url(cola.gif) no-repeat;   
height:0;   
}  

优点:屏幕阅读器可正常访问,没有多余的<span>。

缺点:并没有解决浏览器禁用图象后空白页面的可访问性问题。

Fahrner的方案:
2003年3月,Douglas Bowman在他的网站Stopdesign上发布了一个技巧(www.stopdesign.com/articles/replace_text),让设计师能够用一张背景图像替代某元素中的文字,以期显出更美观的字体。为了表示对发明者Todd Fahrner的尊重,这个技巧随后也被叫做“Fahrner图像替换(Fahrner Image Replacement,FIR)”。该技巧实现非常简单:用span将元素中的文本包围起来,然后通过应用CSS样式隐藏这个span中的文本,最后将背景图像应用到该元素之上即可。例如,对于下面的这一段HTML标记:

XML/HTML Code复制内容到剪贴板

<h1 id="pageHeader"><span>css Zen Garden</span></h1>  

我们可以使用下面的这段CSS容易地实现图像替换:

CSS Code复制内容到剪贴板

#pageHeader{   
background:url(lemonfresh.gif) top left no-repeat;   
width:400px;   
height:20px;   
}   
#pageHeader span{   
display:none;   
}  

通过使用CSS的display:none或visibility:hidden,所有在#pageHeader元素中的span元素都被隐藏起来。Hellsing同时使用了上述两种CSS设定——但它们的效果确实一致的。图像替换技术非常强大且很快开始流行——若是没有它,我们甚至都无法建立禅意花园。该技术可以说是实现复杂、灵活CSS布局的一块最为重要基石。

Rundle的方案:
设计师Mike Rundle提出了一中使用负text-indent属性值的方法,将文本推到屏幕的左边缘之外,代码简洁优雅。

HTML代码:

XML/HTML Code复制内容到剪贴板

<h3 id="header">Apple pie with cheddar?!</h3>  

CSS代码:

CSS Code复制内容到剪贴板

#header{   
text-indent:-5000px;