如何讓超連結文字隱藏掉css程式碼
- 云罗郡主轉載
- 2018-11-22 17:19:393880瀏覽
這篇文章帶給大家的內容是關於如何讓超連結文字隱藏掉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中文網其他相關文章！
陳述：
本文轉載於：thinkcss.com。如有侵權，請聯絡admin@php.cn刪除