由 大兔子大兔子 提交于 2020-11-25 14:29:51

一个很普通的网页中显示 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 处，间接实现文本的不可见。

五，效果预览

[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]