CSS中以圖片替換文字的表現方法

來源:互聯網
上載者:User
css

  今天有個朋友做網頁的時候遇到個問題:想保留連結的背景,但又要連結裡的文字消失!可是弄了半天一直沒辦法把這個文字去掉。我想很多學標準的朋友都遇到過這個問題,這裡我把常用的幾個方法寫出來,把思路也講一下,希望能協助剛開始學習的朋友。

  “以圖換字”就是用圖片替換文字表現。我們都知道,文字在瀏覽器裡的表現形式是很差的,會有鋸齒,沒辦法圓潤還有沒辦法做很多效果。一般情況下網頁的內容部分是不需要做效果的,但是在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;

  以上內容只是我比較常用的兩種方法,當然還會有一些別的方式方法,這些方法都有各自的有缺點,不過各種方法之間也都有互補的。在應用時可以依據情況選擇使用即可。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。