實(shí)例案例描述

這里便于觀察CSS DIV案例效果，我們就來實(shí)現(xiàn)的網(wǎng)站的布局。

擴(kuò)展閱讀：html img圖片

1、CSS 代碼：

h1#logo{ 
float:left;width:165px;height:60px; 
background:url(http://www.php.cn) no-repeat 0 0}
h1#logo a{display:block;width:100%;height:100%;text-indent:-9999px}

/* css注釋：display:block是讓#logo內(nèi)A標(biāo)簽成塊顯示，并以上級100%高度和100%寬度顯示

text-indent此屬性為CSS 縮進(jìn)樣式，我們設(shè)置為負(fù)值的9999px，也就隱藏了a標(biāo)簽內(nèi)文字

這樣一來就顯示了h1標(biāo)簽背景圖片，隱藏了文字又實(shí)現(xiàn)了A錨文本超鏈接

*/

2、HTML代碼：

<h1 id="logo"> 
<a href="http://www.php.cn/" title="PHP中文網(wǎng)"> 
</a> 
</h1>

<!-- html注釋：這里便于截圖觀察，我們將HTML代碼換行排版 -->

案例效果

在瀏覽器顯示結(jié)果，大家可跟著給出實(shí)例代碼思考并完成DIV+CSS實(shí)踐，在瀏覽器中測試測試。

重要解釋：本來HTML里h1標(biāo)簽內(nèi)設(shè)置了文字內(nèi)容，但是設(shè)置“text-indent:-9999px”樣式，實(shí)質(zhì)是讓文字向左平移9999px距離，自然在一般分辨率顯示屏上無法看到9999px邊緣內(nèi)容，自然使用此CSS技巧實(shí)現(xiàn)了文字隱藏同時(shí)，背景圖片顯示正常。

總結(jié)

我們讓圖片作為CSS背景、同時(shí)上面放上文字，又讓文字隱藏，這個(gè)對于SEO來說比較實(shí)用。但實(shí)際操作時(shí)候注意圖片大小高寬，在設(shè)置對象DIV盒子時(shí)候注意高度寬度適合，并使用CSS background背景樣式、text-indent、css display等樣式單詞實(shí)現(xiàn)。根據(jù)案例多實(shí)例實(shí)踐即可學(xué)會。如果不想用A錨文本隱藏圖片上文字，可以將a標(biāo)簽換成span標(biāo)簽、div標(biāo)簽、em標(biāo)簽均可效果相同。

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

什么是js深拷貝和淺拷貝及其實(shí)現(xiàn)方式

詳解前端響應(yīng)式布局、響應(yīng)式圖片，與自制柵格系統(tǒng)

a:active加動畫點(diǎn)擊無效的解決方案

以上就是怎樣用CSS隱藏圖片背景的文字內(nèi)容的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！