一個很普通的網頁中顯示LOGO圖像，按照以往的頁面制作經驗，基本是在頁面中插入圖像即可（<img src="logo.gif" />），不過以新WEB標準進行CSS布局，首先就對該XHTML源碼進行改造，設置為純文本

一、為什么不直接插入圖像？

1、插入圖像的XHTML語意性不強，搜索引擎也無法辨別
2、插入的圖像后期維護不靈活，如果需要變動，必須將引用的頁面全部修改

采用CSS定義圖像替換文本，嚴格意義上來說還是文本（網頁源代碼中可看），但表現形式是圖像化的內容（用戶瀏覽可看），同時如果需要修改圖像，只需修改CSS文件中定義的屬性值即可。

二、CSS定義圖像替換鏈接文本必須滿足哪些要求？

1、能顯示出LOGO圖像
2、隱藏鏈接文本
3、同時實現LOGO區域可點擊

三、將XHTML編碼進行調整？

原先XHTML編碼

<div id="logo"><a href="http://www.3826946.com/" title="手機祝福短信"><img src="logo.gif" /></a></div>

將以上插入的圖片代碼替換成文本

<div id="logo"><a href="http://www.3826946.com/" title="手機祝福短信">短纖維-手機祝福短信網</a></div>

這么修改看來，頁面中不會存在具體的圖像元素，實現XHTML文檔的干凈。從搜索引擎的角度也更利于信息的讀取。

四、通過CSS定義圖像替換該文本（表現形式上）

1、定義id是logo的div的背景圖像，設置為背景圖像不重復，靠左靠上對齊

#logo { ????background-image: url(/images/logo.gif); ????background-repeat: no-repeat; ????background-position: left top; }

2、定義div內的a鏈接屬性，設置寬度和高度（以背景圖像LOGO的大小為基準），設置鏈接的顯示為塊狀（display: block;）

此時的div區域既顯示了背景圖像，又顯示了鏈接文本，并且也有了可點擊區域，設置文本的縮進即可將文本隱藏（text-indent: -9999px;）

#logo a { ????height: 50px; ????width: 269px; ????display: block; ????text-indent: -9999px; }

text-indent一般用在中文段落首行空兩格的習慣中，如“text-indent:2em”，現在設置“-9999px”即將文本置于當前位置左側9999px處，間接實現文本的不可見。

五，效果預覽
<style type="text/css"> <!-- #logo { background-image: url(http://www.3826946.com/images/logo.gif); background-repeat: no-repeat; background-position: left top; } #logo a { height: 50px; width: 269px; display: block; text-indent: -9999px; } --> </style> <div id="logo"><a href="http://www.3826946.com/" title="手機祝福短信">短纖維-手機祝福短信網</a></div>
[Ctrl+A 全部選擇進行拷貝 提示：可先修改部分代碼，再點擊運行]

轉載于:https://www.cnblogs.com/shihao/archive/2011/09/01/2162111.html

總結

以上是生活随笔為你收集整理的如何用CSS实现图像替换链接文本显示并保证链接可点击的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。