以圖換字的幾個方法及思路
“以圖換字”是用圖片替換文字表現(xiàn)。我們都知道,文字在瀏覽器里的表現(xiàn)形式是很差的,會有鋸齒,沒辦法圓潤還有沒辦法做很多效果。一般情況下網(wǎng)頁的內(nèi)容部分是不需要做效果的,但是在WEB標(biāo)準(zhǔn)中對于LOGO、標(biāo)題,常常需要用到這些。用表格來做的話我們只是在某個地方帖上一張圖,這樣的方式比較簡單,但是不利于搜索。所以我們需要采用標(biāo)準(zhǔn)方式來做,保證網(wǎng)頁處于一種良好的狀態(tài)而有利于搜索。通常以圖
顯示消失:(display:none;) 這不只是讓容器內(nèi)的內(nèi)容消失而是包括容器本身都消失。所以我們必需在容器內(nèi)再做一個容器來保證內(nèi)消失部分之后,容器內(nèi)的背景可以正常顯示。例:
標(biāo)題內(nèi)容#logo {display:none; background:URL; width:300px; height:100px;}
如果是這樣寫那么你根本什么也看不到。那正確的方式是什么寫呢?看示例:
標(biāo)題內(nèi)容#logo {background:URL; width:300px; height:100px;}#logo span {display:none;}
大家注意上面的代碼,背景是在#logo下定義,而#logo span下除了display:none;沒有任何樣式。因?yàn)楸欢x了display:none;屬性的容器會一無所見,如果定義其它樣式也是浪費(fèi)。光是這樣還是有問題,這是個沒有鏈接的例子,那有鏈接的時候怎么辦呢?我們再來看個例子:
標(biāo)題內(nèi)容#logo {background:URL; width:300px; height:100px;}#logo a {display:none;}
大家猜一下這個代碼能顯示出東西嗎?事實(shí)是背景顯示了,可是鏈接沒了。我們上面說過:被賦于了display:none;屬性的容器自身也會消失。那我們清楚了,必需要在這個A標(biāo)簽里加個容器。我們再看示例:
標(biāo)題內(nèi)容#logo {background:URL; width:300px; height:100px;}#logo a span {display:none;}
這樣的是不是正確了呢?還是不行,為什么呢,我們都知道A不是塊級標(biāo)簽,也是說A的高寬都是內(nèi)容來決定的,現(xiàn)在內(nèi)容消失了,也沒有了這個高寬的屬性了,那么這個鏈接也成了一個沒有熱區(qū)的鏈接了?赡苁屈c(diǎn)不著的。我們必需要把上面的代碼再做修改。
標(biāo)題內(nèi)容#logo a {background:URL; width:300px; height:100px; display:block;}#logo a span {display:none;}
注意這里的A標(biāo)簽的屬性一定要加上display:block;把他強(qiáng)制為塊級元素。這樣A標(biāo)簽成了一個寬為300高為100,有一個背景沒有文字內(nèi)容的鏈接形式。大家看到了上面在A標(biāo)簽里還加了一個span標(biāo)簽,好像有點(diǎn)多余。能不能不用span也可以實(shí)現(xiàn)效果呢?梢裕贿^思路不一樣了,而是下面的這種位置移動法。
位置移動:也是讓內(nèi)容啊分進(jìn)行位置移動,移出顯示區(qū)之外。我們還是看代碼來了解這個方法。
標(biāo)題內(nèi)容#logo, #logo a {width:300px; height:100px; overflow:hidden;}#logo a {background:URL; padding:100px 0 0; display:block;}
在CSS中設(shè)置了#logo與A有一個溢出隱藏(overflow:hidden;)也是說有超出300*100大小的會被隱藏。我們看A被定義了一個padding:100px 0 0; 這個頂部的內(nèi)距正好把內(nèi)容壓到了顯示區(qū)以外。那為什么#logo也要用overflow:hidden;呢?因?yàn)樵贗E下會出現(xiàn)一個小BUG,A的內(nèi)容沒辦法溢出隱藏所以必需要在父級標(biāo)簽上還要加一個overflow:hidden;
以上內(nèi)容只是我比較常用的兩種方法,當(dāng)然還會有一些別的方式方法,這些方法都有各自的有缺點(diǎn),不過各種方法之間也都有互補(bǔ)的。在應(yīng)用時可以依據(jù)情況選擇使用即可。