CSS图像替换技术方案有哪几种

这篇文章主要讲解了“CSS图像替换技术方案有哪几种”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS图像替换技术方案有哪几种”吧！

Levin的方案：
Levin Alexander想出了一个绝妙的注意：不再将文本置放于span中，而是将其从span中移出来，将文本和span一起放在父元素中，然后使用这个空白的span覆盖文本，并将背景图像应用到span之上。如果一切顺利的话，屏幕阅读器即可正常访问这段文本，切也充分考虑并解决了浏览器禁用图像后空白页面的可访问性问题了。但新的问题也随之出现，那就是图像不能是透明的，否则用户将会看到下面的文本。切这种方案所需要的CSS代码极为冗长，让人难以理解。

HTML代码：

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

1. <h4 class="replace" id="myh2">And a dash of Thyme.<span></span></h4>  

CSS代码：

CSS Code复制内容到剪贴板

1. .replace{   

2. position:relative;   

3. margin:0;   

4. padding:0;   

5. }   

6. .replace span{   

7. display:block;   

8. position:absolute;   

9. top:0;   

10. left:0;   

11. z-index:1;   

12. }   

13. #myh2,#myh2 span{   

14. height:25px;   

15. width:300px;   

16. background:url(thyme.png);   

17. }  

优点：屏幕阅读器可正常访问；解决浏览器禁用图片后空白页面的可访问性问题。

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

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

HTML代码：

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

1. <h4 id="header">I like cola.</h4>  

CSS代码：

CSS Code复制内容到剪贴板

1. #header{   

2. padding:25px 0 0 0;   

3. overflow:hidden;   

4. background:url(cola.gif) no-repeat;   

5. height:0;   

6. }  

优点：屏幕阅读器可正常访问，没有多余的<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复制内容到剪贴板

1. <h2 id="pageHeader"><span>css Zen Garden</span></h2>  

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

CSS Code复制内容到剪贴板

1. #pageHeader{   

2. background:url(lemonfresh.gif) top left no-repeat;   

3. width:400px;   

4. height:20px;   

5. }   

6. #pageHeader span{   

7. display:none;   

8. }  

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

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

HTML代码：

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

1. <h4 id="header">Apple pie with cheddar?!</h4>  

CSS代码：

CSS Code复制内容到剪贴板

1. #header{   

2. text-indent:-5000px;   

3. background:url(sample-image.gif) no-repeat;   

4. height:25px;   

5. }  

优点：屏幕阅读器可正常访问；没有多余的<span>；简洁优雅的CSS。

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

感谢各位的阅读，以上就是“CSS图像替换技术方案有哪几种”的内容了，经过本文的学习后，相信大家对CSS图像替换技术方案有哪几种这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！