九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

使用CSS樣式隱藏圖片作為背景圖片上方的文字內(nèi)容

此類問題我們常見于LOGO處使用，我們想讓圖片作為背景，而圖片上方放A鏈接文字內(nèi)容，但html錨文本功能仍然正常也能鼠標點擊使用。

一、用到的CSS單詞   -   TOP

根據(jù)以上描述，將使用DIV CSS樣式單詞如下：
1、css background - CSS 背景
2、css text-indent - CSS縮進
3、html a錨文本標簽
4、css display:block顯示塊
5、css width寬度
6、css height高度

以上CSS屬性樣式單詞使用解釋
我們使用background背景是將圖片設(shè)為背景顯示；
使用text-indent縮進是隱藏a鏈接內(nèi)容
使用<a>鏈接標簽是對文字設(shè)置錨文本鏈接。

擴展閱讀：
1、CSS隱藏內(nèi)容方法
2、css 背景
3、css背景顏色
4、背景圖片
5、css a樣式
6、css鼠標指針
7、CSS隱藏超出DIV寬度高度限制內(nèi)容
8、CSS解決圖片過大撐破撐開DIV布局

二、背景圖片隱藏上方文字實際應(yīng)用截圖   -   TOP

圖片作為背景而html代碼內(nèi)看不到圖片，但文字也存在，卻是文字隱藏圖片顯示出，鼠標也能點擊指向。

三、實際使用案例   -   TOP

接下來DIVCSS5帶領(lǐng)大家實現(xiàn)DIVCSS5網(wǎng)站LOGO布局（實現(xiàn)logo圖片上文字內(nèi)容隱藏同時超鏈接保留）。

實例案例描述
這里便于觀察CSS DIV案例效果，我們就來實現(xiàn)DIVCSS5的網(wǎng)站LOGO布局。
LOGO圖片地址：http://www.divcss5.com/img201301/divcss5-logo-2013.gif
擴展閱讀：html img圖片

1、CSS 代碼：

h1#logo{ 
float:left;width:165px;height:60px; 
background:url(http://www.divcss5.com/img201301/divcss5-logo-2013.gif) no-repeat 0 0}
 
/* CSS注釋： float設(shè)置浮動，并設(shè)置CSS寬度和CSS高度 CSS背景 
為了便于截圖我們將CSS代碼換行排版 
*/ 
 
h1#logo a{display:block;width:100%;height:100%;text-indent:-9999px}
 
/* css注釋：display:block是讓#logo內(nèi)A標簽成塊顯示，并以上級100%高度和100%寬度顯示 
text-indent此屬性為CSS 縮進樣式，我們設(shè)置為負值的9999px，也就隱藏了a標簽內(nèi)文字 
這樣一來就顯示了h1標簽背景圖片，隱藏了文字又實現(xiàn)了A錨文本超鏈接 
*/ 

2、

3、案例效果

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

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

在線演示：點擊進入

四、DIVCSS5總結(jié)   -   TOP

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

如需轉(zhuǎn)載，請注明文章出處和來源網(wǎng)址：http://www.divcss5.com/jiqiao/j438.shtml