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