|
|
“以圖換字”就是用圖片替換文字表現(xiàn)。我們都知道，文字在瀏覽器里的表現(xiàn)形式是很差的，會(huì)有鋸齒，沒(méi)辦法圓潤(rùn)還有沒(méi)辦法做很多效果。一般情況下網(wǎng)頁(yè)的內(nèi)容部分是不需要做效果的，但是在WEB標(biāo)準(zhǔn)中對(duì)于LOGO、標(biāo)題，常常需要用到這些。用表格來(lái)做的話我們只是在某個(gè)地方帖上一張圖，這樣的方式比較簡(jiǎn)單，但是不利于搜索。所以我們需要采用標(biāo)準(zhǔn)方式來(lái)做，保證網(wǎng)頁(yè)處于一種良好的狀態(tài)而有利于搜索。通常以圖
顯示消失：(display:none;) 這不只是讓容器內(nèi)的內(nèi)容消失而是包括容器本身都消失。所以我們必需在容器內(nèi)再做一個(gè)容器來(lái)保證內(nèi)消失部分之后，容器內(nèi)的背景可以正常顯示。例：
復(fù)制代碼 代碼如下:<div id="logo">標(biāo)題內(nèi)容</div>#logo {display:none; background:URL; width:300px; height:100px;}
如果是這樣寫那么你根本什么也看不到。那正確的方式是什么寫呢？看示例：
復(fù)制代碼 代碼如下:<div id="logo"><span>標(biāo)題內(nèi)容</span></div>#logo {background:URL; width:300px; height:100px;}#logo span {display:none;} 大家注意上面的代碼，背景是在#logo下定義，而#logo span下除了display:none;沒(méi)有任何樣式。因?yàn)楸欢x了display:none;屬性的容器會(huì)一無(wú)所見(jiàn)，如果定義其它樣式也是浪費(fèi)。光是這樣還是有問(wèn)題，這是個(gè)沒(méi)有鏈接的例子，那有鏈接的時(shí)候怎么辦呢？我們?cè)賮?lái)看個(gè)例子：
復(fù)制代碼 代碼如下:<div id="logo"><a href="URL" title="標(biāo)題">標(biāo)題內(nèi)容</a></div>#logo {background:URL; width:300px; height:100px;}#logo a {display:none;}
大家猜一下這個(gè)代碼能顯示出東西嗎？事實(shí)是背景顯示了，可是鏈接沒(méi)了。我們上面說(shuō)過(guò)：被賦于了display:none;屬性的容器自身也會(huì)消失。那我們就清楚了，必需要在這個(gè)A標(biāo)簽里加個(gè)容器。我們?cè)倏词纠?
復(fù)制代碼 代碼如下:<div id="logo"><a href="URL" title="標(biāo)題"><span>標(biāo)題內(nèi)容</span></a></div>#logo {background:URL; width:300px; height:100px;}#logo a span {display:none;} 這樣的是不是就正確了呢？還是不行，為什么呢，我們都知道A不是塊級(jí)標(biāo)簽，也就是說(shuō)A的高寬都是內(nèi)容來(lái)決定的，現(xiàn)在內(nèi)容消失了，也就沒(méi)有了這個(gè)高寬的屬性了，那么這個(gè)鏈接也就成了一個(gè)沒(méi)有熱區(qū)的鏈接了。可能是點(diǎn)不著的。我們必需要把上面的代碼再做修改。
復(fù)制代碼 代碼如下:<div id="logo"><a href="URL" title="標(biāo)題"><span>標(biāo)題內(nèi)容</span></a></div>#logo a {background:URL; width:300px; height:100px; display:block;}#logo a span {display:none;}
注意這里的A標(biāo)簽的屬性一定要加上display:block;把他強(qiáng)制為塊級(jí)元素。這樣A標(biāo)簽就成了一個(gè)寬為300高為100，有一個(gè)背景沒(méi)有文字內(nèi)容的鏈接形式。大家看到了上面在A標(biāo)簽里還加了一個(gè)span標(biāo)簽，好像有點(diǎn)多余。能不能不用span也可以實(shí)現(xiàn)效果呢。可以，不過(guò)思路就不一樣了，而是下面的這種位置移動(dòng)法。
位置移動(dòng)：也就是讓內(nèi)容啊分進(jìn)行位置移動(dòng)，移出顯示區(qū)之外。我們還是看代碼來(lái)了解這個(gè)方法。
復(fù)制代碼 代碼如下:<div id="logo"><a href="URL" title="標(biāo)題">標(biāo)題內(nèi)容</a></div>#logo, #logo a {width:300px; height:100px; overflow:hidden;}#logo a {background:URL; padding:100px 0 0; display:block;} 在CSS中設(shè)置了#logo與A有一個(gè)溢出隱藏(overflow:hidden;)也就是說(shuō)有超出300*100大小的就會(huì)被隱藏。我們看A被定義了一個(gè)padding:100px 0 0; 這個(gè)頂部的內(nèi)距正好把內(nèi)容壓到了顯示區(qū)以外。那為什么#logo也要用overflow:hidden;呢？因?yàn)樵贗E下會(huì)出現(xiàn)一個(gè)小BUG，A的內(nèi)容沒(méi)辦法溢出隱藏所以必需要在父級(jí)標(biāo)簽上還要加一個(gè)overflow:hidden;
以上內(nèi)容只是我比較常用的兩種方法，當(dāng)然還會(huì)有一些別的方式方法，這些方法都有各自的有缺點(diǎn)，不過(guò)各種方法之間也都有互補(bǔ)的。在應(yīng)用時(shí)可以依據(jù)情況選擇使用即可。
HTML/CSS技術(shù)：以圖換字的幾個(gè)方法及思路，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
