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圖像替換技術方案有哪幾種這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！