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

一个很普通的网页中显示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

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

HTML字体怎么显示,教你如何用CSS来控制网页字体的显示样式
教你如何用CSS来控制网页字体的显示样式更新时间:2007年02月27日 00:00:00 作者: HTML对于<font>内容</font>卷标只有: <font ...
selenium查找文本_在Selenium中查找具有链接文本和部分链接文本的元素
selenium查找文本 Selenium中CSS定位器是一个基本概念,每个旨在使用Selenium执行自动化测试的测试人员都应该意识到这一点. 在Selenium中充分使用CSS定位器可以帮助您以更 ...
在硒中查找具有链接文本和部分链接文本的元素
Selenium中CSS定位器是一个基本概念,每个旨在使用Selenium执行自动化测试的测试人员都应该意识到这一点. 在Selenium中充分使用CSS定位器可以帮助您以更高效,更彻底的方式执行测试 ...
CSS知识点整理(代码示例参考w3shool）（包括CSS概念语法作用、CSS引入方式、CSS背景、文本、字体、链接、轮廓、表格、常用选择器等）
文章目录 CSS简介 CSS 概念 CSS 作用 CSS 语法 CSS引入方式 1.内联样式表 2.内部样式表 3.外部样式表 CSS常用样式 CSS背景 1.背景色:background-color ...
CSS样式笔记_背景文本字体链接
CSS背景属性: background:简写属性在一个声明中设置所有的背景属性.可以用于设置最底层的背景图片. background-attachment:属性设置背景图像是否固定或者随着页面的其余部 ...
css替换_CSS图像替换的历史
css替换 Image replacement in CSS has had a wide and varied history. In this modern age, if you are sti ...
html链接不同状态样式,如何用css为超链接设置不同样式
如何用css为超链接设置不同样式 css设置超链接的样式可以使用伪类来实现,使用link来设置正常链接的样式,visited设置访问过的链接样式,hover设置鼠标悬浮时的样式,active设置鼠标点 ...
如何用Python和BERT做中文文本二元分类？| 程序员硬核评测
点击上方↑↑↑蓝字关注我们~ 「2019 Python开发者日」全日程揭晓,请扫码咨询 ↑↑↑ 作者 | 王树义来源 | 王树芝兰(ID:nkwangshuyi) 兴奋去年, Google 的 B ...
怎样用html设置文档格式,Dreamweaver使用CSS样式表设置网页文本格式
Dreamweaver使用CSS样式表设置网页文本格式互联网发布时间:2008-10-17 19:35:50 作者:佚名我要评论本文章介绍如何在 Dreamweaver 中使用层叠 ...

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

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

最新文章

热门文章