如何用CSS实现图像替换链接文本显示并保证链接可点击

最新推荐文章于 2024-09-20 16:06:21 发布

weixin_30819163

最新推荐文章于 2024-09-20 16:06:21 发布

阅读量76

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/shihao/archive/2011/09/01/2162111.html

版权

一个很普通的网页中显示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="手机祝福短信">短纤维-手机祝福短信网</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">  </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