這篇文章主要講解了“CSS圖像替換技術(shù)方案有哪幾種”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS圖像替換技術(shù)方案有哪幾種”吧！
創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、攸縣網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、商城開發(fā)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為攸縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
Levin的方案：
Levin Alexander想出了一個絕妙的注意：不再將文本置放于span中，而是將其從span中移出來，將文本和span一起放在父元素中，然后使用這個空白的span覆蓋文本，并將背景圖像應(yīng)用到span之上。如果一切順利的話，屏幕閱讀器即可正常訪問這段文本，切也充分考慮并解決了瀏覽器禁用圖像后空白頁面的可訪問性問題了。但新的問題也隨之出現(xiàn)，那就是圖像不能是透明的，否則用戶將會看到下面的文本。切這種方案所需要的CSS代碼極為冗長，讓人難以理解。
HTML代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
CSS代碼：
CSS Code復(fù)制內(nèi)容到剪貼板
.replace{
position:relative;
margin:0;
padding:0;
}
.replace span{
display:block;
position:absolute;
top:0;
left:0;
z-index:1;
}
#myh2,#myh2 span{
height:25px;
width:300px;
background:url(thyme.png);
}
優(yōu)點：屏幕閱讀器可正常訪問；解決瀏覽器禁用圖片后空白頁面的可訪問性問題。
缺點：無法使用透明圖像；CSS代碼較為冗長。
Leahy和Langridge的方案：
Seamus Leahy和Stuart Langridge均獨立地發(fā)現(xiàn)了這種方法。該方法讓我們不必再添加那些多余的標簽，且在保證屏幕閱讀器可以正常閱讀文本的同時，也能在頁面中隱藏元素中的內(nèi)容。
HTML代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
CSS代碼：
CSS Code復(fù)制內(nèi)容到剪貼板
#header{
padding:25px 0 0 0;
overflow:hidden;
background:url(cola.gif) no-repeat;
height:0;
}
優(yōu)點：屏幕閱讀器可正常訪問，沒有多余的。
缺點：并沒有解決瀏覽器禁用圖象后空白頁面的可訪問性問題。
Fahrner的方案：
2003年3月，Douglas Bowman在他的網(wǎng)站Stopdesign上發(fā)布了一個技巧（www.stopdesign.com/articles/replace_text)，讓設(shè)計師能夠用一張背景圖像替代某元素中的文字，以期顯出更美觀的字體。為了表示對發(fā)明者Todd Fahrner的尊重，這個技巧隨后也被叫做“Fahrner圖像替換（Fahrner Image Replacement，F(xiàn)IR）”。該技巧實現(xiàn)非常簡單：用span將元素中的文本包圍起來，然后通過應(yīng)用CSS樣式隱藏這個span中的文本，最后將背景圖像應(yīng)用到該元素之上即可。例如，對于下面的這一段HTML標記：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
我們可以使用下面的這段CSS容易地實現(xiàn)圖像替換：
CSS Code復(fù)制內(nèi)容到剪貼板
#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設(shè)定——但它們的效果確實一致的。圖像替換技術(shù)非常強大且很快開始流行——若是沒有它，我們甚至都無法建立禪意花園。該技術(shù)可以說是實現(xiàn)復(fù)雜、靈活CSS布局的一塊最為重要基石。
Rundle的方案：
設(shè)計師Mike Rundle提出了一中使用負text-indent屬性值的方法，將文本推到屏幕的左邊緣之外，代碼簡潔優(yōu)雅。
HTML代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
CSS代碼：
CSS Code復(fù)制內(nèi)容到剪貼板
#header{
text-indent:-5000px;
background:url(sample-image.gif) no-repeat;
height:25px;
}
優(yōu)點：屏幕閱讀器可正常訪問；沒有多余的；簡潔優(yōu)雅的CSS。
缺點：并沒有解決瀏覽器禁用圖像后空白頁面的可訪問性問題。
感謝各位的閱讀，以上就是“CSS圖像替換技術(shù)方案有哪幾種”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS圖像替換技術(shù)方案有哪幾種這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
