這篇文章帶給大家的內容是關於如何讓超連結文字隱藏掉css程式碼,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
讓超連結內文字隱藏掉css技巧版面方法
有時div css網頁版面時,使用超連結a標籤,但需要將文字隱藏,但超連結又不失效的需求。例如圖片或圖示的超鏈接,把圖片或圖示當作背景圖片,上面使用超連結a加文字,但又不想讓文字顯示,超連結存在的又可以點擊,圖片也可以看見這個時候就是隱藏超連結文字。
使用CSS屬性單字:text-indent
text-indent介紹:
文字內容縮排屬性,常見用於文段開頭文字縮排兩個文字,例如文章段落每段縮排兩個漢字設定text-indent即可。
要隱藏也是有text-indent來實現,例如設定text-indent:-999px或text-indent:-9999px讓物件內文字往前縮排9999px達到隱藏作用。
超連結存在文字隱藏css佈局案例如下:
#1、案例代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>超链接存在文字隐藏 在线演示</title> <style> .logo{ margin:0 auto;width:175px; height:51px; background:url(phplogo.gif) no-repeat 0 0} .logo a{ display:block; width:100%; height:100%; text-indent:-9999px} </style> </head> <body> <div class="logo"><a href="http://www.php.cn/">php中文网</a></div> </body> </html>
設定一個class=logo的盒子,設定thinkcss的網站logo為背景圖片,設定寬度和高度。
首先」.logo」選擇器內設定css寬度、css高度、logo圖片作為背景;
再對class=logo物件內超連結a設定形成區塊(讓超連結a寬高生效)、設定寬度和高度,同時設定text-indent:-9999px隱藏超連結內的文字。當然這樣文字隱藏了,但超連結和背景圖片保留了。
以上就是如何讓超連結文字隱藏掉css程式碼的全部介紹,如果您想了解更多有關CSS3教學,請關注PHP中文網。
以上是如何讓超連結文字隱藏掉css程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!