首頁 > web前端 > css教學 > 主體

如何讓超連結文字隱藏掉css程式碼

云罗郡主
發布: 2018-11-22 17:19:55
轉載
3885 人瀏覽過

這篇文章帶給大家的內容是關於如何讓超連結文字隱藏掉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>
登入後複製

如何讓超連結文字隱藏掉css程式碼

設定一個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
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板