CSS中以圖片替換文字的表現(xiàn)方法_DIV+CSS實(shí)例
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
今天有個(gè)朋友做網(wǎng)頁(yè)的時(shí)候碰到個(gè)問(wèn)題:想保留鏈接的背景,但又要鏈接里的文字消失!可是弄了半天一直沒(méi)辦法把這個(gè)文字去掉。我想很多學(xué)標(biāo)準(zhǔn)的朋友都碰到過(guò)這個(gè)問(wèn)題,這里我把常用的幾個(gè)方法寫出來(lái),把思路也講一下,希望能幫助剛開(kāi)始學(xué)習(xí)的朋友。
“以圖換字”就是用圖片替換文字表現(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)題,經(jīng)常需要用到這些。用表格來(lái)做的話我們只是在某個(gè)地方帖上一張圖,這樣的方式比較簡(jiǎn)單,但是不利于搜索。所以我們需要采用標(biāo)準(zhǔn)方式來(lái)做,保證網(wǎng)頁(yè)處于一種良好的狀態(tài)而有利于搜索。通常以圖片來(lái)替換文字,圖片顯示保留而文字則不可見(jiàn)。
顯示消失:(display:none;) 這不只是讓容器內(nèi)的內(nèi)容消失而是包括容器本身都消失。所以我們必需在容器內(nèi)再做一個(gè)容器來(lái)保證內(nèi)消失部分之后,容器內(nèi)的背景可以正常顯示。例 :
假如是這樣寫那么你根本什么也看不到。那正確的方式是什么寫呢?看示例:
大家注重上面的代碼,背景是在#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è)例子:
大家猜一下這個(gè)代碼能顯示出東西嗎?事實(shí)是背景顯示了,可是鏈接沒(méi)了。我們上面說(shuō)過(guò):被賦于了display:none;屬性的容器自身也會(huì)消失。那我們就清楚了,必需要在這個(gè)A標(biāo)簽里加個(gè)容器。我們?cè)倏词纠?br />
這樣的是不是就正確了呢?還是不行,為什么呢,我們都知道A不是塊級(jí)標(biāo)簽,也就是說(shuō)A的高寬都是內(nèi)容來(lái)決定的,現(xiàn)在內(nèi)容消失了,也就沒(méi)有了這個(gè)高寬的屬性了,那么這個(gè)鏈接也就成了一個(gè)沒(méi)有熱區(qū)的鏈接了。可能是點(diǎn)不著的。我們必需要把上面的代碼再做修改。
注重這里的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è)方法。
在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ù)情況選擇使用即可。
“以圖換字”就是用圖片替換文字表現(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)題,經(jīng)常需要用到這些。用表格來(lái)做的話我們只是在某個(gè)地方帖上一張圖,這樣的方式比較簡(jiǎn)單,但是不利于搜索。所以我們需要采用標(biāo)準(zhǔn)方式來(lái)做,保證網(wǎng)頁(yè)處于一種良好的狀態(tài)而有利于搜索。通常以圖片來(lái)替換文字,圖片顯示保留而文字則不可見(jiàn)。
顯示消失:(display:none;) 這不只是讓容器內(nèi)的內(nèi)容消失而是包括容器本身都消失。所以我們必需在容器內(nèi)再做一個(gè)容器來(lái)保證內(nèi)消失部分之后,容器內(nèi)的背景可以正常顯示。例 :
示例代碼 [m.dounai2.com]
<div id="logo">標(biāo)題內(nèi)容</div>
#logo {display:none; background:URL; width:300px; height:100px;}
#logo {display:none; background:URL; width:300px; height:100px;}
假如是這樣寫那么你根本什么也看不到。那正確的方式是什么寫呢?看示例:
示例代碼 [m.dounai2.com]
<div id="logo"><span>標(biāo)題內(nèi)容</span></div>
#logo {background:URL; width:300px; height:100px;}
#logo span {display:none;}
#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è)例子:
示例代碼 [m.dounai2.com]
<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;}
#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è)倏词纠?br />
示例代碼 [m.dounai2.com]
<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;}
#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)不著的。我們必需要把上面的代碼再做修改。
示例代碼 [m.dounai2.com]
<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;}
#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è)方法。
示例代碼 [m.dounai2.com]
<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;}
#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ù)情況選擇使用即可。
相關(guān)DIV+CSS實(shí)例:
- 固定div容器的寬高,圖片居中(圖片不限制大小)
- 用css制作有滾動(dòng)條的居中彈出框
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- 10個(gè)很酷的涂鴉風(fēng)格國(guó)外網(wǎng)店設(shè)計(jì)展示
- jquery模擬瀏覽器滾動(dòng)條效果
- 仿谷歌google的搜索框下拉提示列表效果
- JS顯示網(wǎng)頁(yè)最后更新時(shí)間
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- DivCSS布局實(shí)例用dldtdd來(lái)制作列表
DIV+CSS實(shí)例Rss訂閱Div+Css教程搜索
DIV+CSS實(shí)例推薦
- DIVCSS布局實(shí)例:一款漂亮的圖片切換效果(可以控制播放)
- CSS布局教程:如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示?
- DIVCSS菜單:黑白灰?guī)в嘘幱靶Ч腃SS橫向菜單
- IE6、IE7絕對(duì)定位與鏈接問(wèn)題研究
- DivCSS布局實(shí)例:很實(shí)用的圖文混排CSS列表-富有語(yǔ)義
- 鼠標(biāo)指住(hover)變色的按鈕演示demo
- CSS實(shí)例:區(qū)分IE6、IE7、FF對(duì)HR解釋的CSShack
- DivCSS實(shí)例:一個(gè)效果很不錯(cuò)的CSS列表
- CSSFormExample:帶有小圖標(biāo)的清爽CSS表單設(shè)計(jì)!
- CSS實(shí)例:非常不錯(cuò)的鼠標(biāo)懸停TIP效果!
猜你也喜歡看這些
- 實(shí)現(xiàn)CSS網(wǎng)頁(yè)布局的簡(jiǎn)單原理
- 不規(guī)則文字排版的CSS樣式如何定義?
- Javascript來(lái)控制target屬性
- CSS網(wǎng)頁(yè)布局經(jīng)驗(yàn):富有語(yǔ)義地類class和id標(biāo)記命名
- Web標(biāo)準(zhǔn)化之form語(yǔ)義結(jié)構(gòu)的實(shí)例
- WebDesignUsabilityCheckList-Web可用性檢查列表
- CSS實(shí)戰(zhàn)經(jīng)驗(yàn):靈活運(yùn)行注釋帶來(lái)的益處
- IE6下絕對(duì)定位的容器內(nèi)文本無(wú)法正常選擇的問(wèn)題
- 閉合浮動(dòng)元素(clearingfloat)的簡(jiǎn)單方法
- li列表項(xiàng)標(biāo)簽中插入圖片浮動(dòng)出現(xiàn)的一種奇怪現(xiàn)象
- 相關(guān)鏈接:
- 教程說(shuō)明:
DIV+CSS實(shí)例-CSS中以圖片替換文字的表現(xiàn)方法。