欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS圖像替換技術(shù)的幾種方案介紹

一起CSS   發(fā)布時(shí)間：2015-09-28 11:39:35   作者：佚名   我要評(píng)論
這篇文章主要介紹了CSS圖像替換技術(shù)的幾種方案介紹,有利于網(wǎng)頁(yè)的設(shè)計(jì)布局和修改編輯,需要的朋友可以參考下

圖像替換技術(shù)非常強(qiáng)大且很快開(kāi)始流行——若是沒(méi)有它，我們甚至都無(wú)法建立禪意花園。該技術(shù)可以說(shuō)是實(shí)現(xiàn)復(fù)雜、靈活CSS布局的一塊最為重要基石。
由此可以見(jiàn)圖像替換的重要。

也許你會(huì)說(shuō)直接放一副圖片或加上背景不行嗎？為什么要寫(xiě)上文本有把文本隱藏呢？這不是多此一舉嗎？這樣做確實(shí)能達(dá)到一樣的視覺(jué)效果，但對(duì)搜索引擎是不利的。因?yàn)樗阉饕娌荒軓倪@塊地方的到任何內(nèi)容，它就不知道這塊地方要表達(dá)什么意思。而使用圖像替換技術(shù)對(duì)搜索引擎就很友好。在引用《CSS禪意花園》中的一段：

圖像替換技術(shù)使用display:none的本意并不只是想要替換文本，這樣做還有一些更深層次的理由。實(shí)際上，若是沒(méi)有任何提示或幫助，計(jì)算機(jī)就無(wú)法認(rèn)出或讀取圖像中包含的文字。例如HTML中img元素，若是沒(méi)有了alt屬性，那么對(duì)于google等搜索引擎，以及輔助瀏覽設(shè)備（例如，屏幕閱讀器即可閱讀頁(yè)面內(nèi)容，并以聲音的形式告訴瀏覽者）之類無(wú)法呈現(xiàn)圖像的客戶端來(lái)說(shuō)，將變的豪無(wú)意義。而圖像替換技術(shù)則保留了被替換元素中的原有文本，因此無(wú)論對(duì)任何客戶而言，理解頁(yè)面內(nèi)容都不成問(wèn)題。
直接使用圖像或背景是傳統(tǒng)表格布局使用的方法，而圖像替換是CSS布局使用的方法。這又一次證明了CSS布局的網(wǎng)站更有優(yōu)點(diǎn)。

Levin的方案：
Levin Alexander想出了一個(gè)絕妙的注意：不再將文本置放于span中，而是將其從span中移出來(lái)，將文本和span一起放在父元素中，然后使用這個(gè)空白的span覆蓋文本，并將背景圖像應(yīng)用到span之上。如果一切順利的話，屏幕閱讀器即可正常訪問(wèn)這段文本，切也充分考慮并解決了瀏覽器禁用圖像后空白頁(yè)面的可訪問(wèn)性問(wèn)題了。但新的問(wèn)題也隨之出現(xiàn)，那就是圖像不能是透明的，否則用戶將會(huì)看到下面的文本。切這種方案所需要的CSS代碼極為冗長(zhǎng)，讓人難以理解。

HTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <h3 class="replace" id="myh1">And a dash of Thyme.<span></span></h3>  


CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  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. #myh1,#myh1 span{   
  14. height:25px;   
  15. width:300px;   
  16. background:url(thyme.png);   
  17. }  

優(yōu)點(diǎn)：屏幕閱讀器可正常訪問(wèn)；解決瀏覽器禁用圖片后空白頁(yè)面的可訪問(wèn)性問(wèn)題。

缺點(diǎn)：無(wú)法使用透明圖像；CSS代碼較為冗長(zhǎng)。

Leahy和Langridge的方案：
Seamus Leahy和Stuart Langridge均獨(dú)立地發(fā)現(xiàn)了這種方法。該方法讓我們不必再添加那些多余的<span>標(biāo)簽，且在保證屏幕閱讀器可以正常閱讀文本的同時(shí)，也能在頁(yè)面中隱藏元素中的內(nèi)容。

HTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <h3 id="header">I like cola.</h3>  

CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #header{   
  2. padding:25px 0 0 0;   
  3. overflow:hidden;   
  4. background:url(cola.gif) no-repeat;   
  5. height:0;   
  6. }  


優(yōu)點(diǎn)：屏幕閱讀器可正常訪問(wèn)，沒(méi)有多余的<span>。

缺點(diǎn)：并沒(méi)有解決瀏覽器禁用圖象后空白頁(yè)面的可訪問(wèn)性問(wèn)題。

Fahrner的方案：
2003年3月，Douglas Bowman在他的網(wǎng)站Stopdesign上發(fā)布了一個(gè)技巧（www.stopdesign.com/articles/replace_text)，讓設(shè)計(jì)師能夠用一張背景圖像替代某元素中的文字，以期顯出更美觀的字體。為了表示對(duì)發(fā)明者Todd Fahrner的尊重，這個(gè)技巧隨后也被叫做“Fahrner圖像替換（Fahrner Image Replacement，F(xiàn)IR）”。該技巧實(shí)現(xiàn)非常簡(jiǎn)單：用span將元素中的文本包圍起來(lái)，然后通過(guò)應(yīng)用CSS樣式隱藏這個(gè)span中的文本，最后將背景圖像應(yīng)用到該元素之上即可。例如，對(duì)于下面的這一段HTML標(biāo)記：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <h1 id="pageHeader"><span>css Zen Garden</span></h1>  


我們可以使用下面的這段CSS容易地實(shí)現(xiàn)圖像替換：

CSS Code復(fù)制內(nèi)容到剪貼板
  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. }  

通過(guò)使用CSS的display:none或visibility:hidden，所有在#pageHeader元素中的span元素都被隱藏起來(lái)。Hellsing同時(shí)使用了上述兩種CSS設(shè)定——但它們的效果確實(shí)一致的。圖像替換技術(shù)非常強(qiáng)大且很快開(kāi)始流行——若是沒(méi)有它，我們甚至都無(wú)法建立禪意花園。該技術(shù)可以說(shuō)是實(shí)現(xiàn)復(fù)雜、靈活CSS布局的一塊最為重要基石。

Rundle的方案：
設(shè)計(jì)師Mike Rundle提出了一中使用負(fù)text-indent屬性值的方法，將文本推到屏幕的左邊緣之外，代碼簡(jiǎn)潔優(yōu)雅。

HTML代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <h3 id="header">Apple pie with cheddar?!</h3>  


CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #header{   
  2. text-indent:-5000px;   
  3. background:url(sample-image.gif) no-repeat;   
  4. height:25px;   
  5. }  

優(yōu)點(diǎn)：屏幕閱讀器可正常訪問(wèn)；沒(méi)有多余的<span>；簡(jiǎn)潔優(yōu)雅的CSS。

缺點(diǎn)：并沒(méi)有解決瀏覽器禁用圖像后空白頁(yè)面的可訪問(wèn)性問(wèn)題。

相關(guān)文章

  • 使用CSS cross-fade()實(shí)現(xiàn)背景圖像半透明效果的示例代碼

    這篇文章主要介紹了使用CSS cross-fade()實(shí)現(xiàn)背景圖像半透明效果的示例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-07-07

  • 詳解css圖像拼合技術(shù)（精靈圖）

    這篇文章主要介紹了詳解css圖像拼合技術(shù)（精靈圖）的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-07-20

  • 純css實(shí)現(xiàn)3D圖像輪轉(zhuǎn)效果

    這篇文章主要為大家詳細(xì)介紹了純css實(shí)現(xiàn)3D圖像輪轉(zhuǎn)效果，css制作的3D圖像輪轉(zhuǎn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-03-10

  • CSS實(shí)現(xiàn)圖像映射的方法

    這篇文章主要介紹了CSS實(shí)現(xiàn)圖像映射的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-03-08

最新評(píng)論