专注优质Wordpress企业网站搭建与优化

柳影花阴：CSS图像替换文本技术（上）



SEO优化,CSS教程,Wordpress博客

在HTML元素中，毫无疑问图像比文本具有更丰富的表现形式，比如文章的标题，图片型的往往比纯文本大字型的要更加美观和醒目。但是这过程中要面对的一个问题是：一方面要将图像展示给用户，另一方面又要顾及搜索引擎和屏幕阅读器的需要保留文字信息，这就引出了图像替换的问题。图像替换的概念,就是可以像平常一样将文本添加到文档中，然后使用CSS隐藏文本并在它的位置上显示一个背景图像。这样的话，搜索引擎仍然可以搜索HTML文本，而且如果禁用CSS，文本仍然会显示。

在各种缺陷暴露出来之前，这个概念看起来非常棒。但是，一些比较流行的图像替换方法对于屏幕阅读器是无效的，而且如果关闭图像但是打开CSS，就会出现内容缺失。因此，许多CSS作者停止使用图像替换方法，恢复为使用一般文本。虽然我也主张尽可能避免图像替换，但是仍然相信在某些情况下它是合适的，比如由于公司品牌策略的要求，需要使用特定的字体。为此，你应该很好地掌握各种技术并且了解它们的局限性。

1.经典的FIR方法

  1. <style>
  2. #header {
  3. width: 329px;
  4. height: 25px;
  5. background-image: url(attachments/month_0803/sample-opaque.gif);
  6. }
  7. #header span {
  8. display: none;
  9. }
  10. </style>
  11. <h3 id="header">
  12. <span>Revised Image Replacement</span>
  13. </h3>

由Todd Fahrner开创的FIR是最早且可能最流行的图像替换技术。对这个方法进行解释是因为它在历史上具有重要意义，而且它是最容易理解的方法之一。但是，这个方法有一些严重的可访问性问题，因此应该避免使用。

它的基本概念非常简单，把要替换掉的文本放在span标签中，然后将替换图像作为背景图像应用于标题元素，并且将span的display值设置为none，从而隐藏span的内容。

这个方法似乎很有效，但是最后一个规则会造成问题。许多流行的屏幕阅读器会忽略那些display值设置为none或hidden的元素。因此会完全忽略这个文本，造成严重的可访问性问题。所以，这种试图改进站点可访问性的技术实际上产生了相反的效果。

下面列举的方法中，设置背景和隐藏文字的原理并无很大的差异，只不过使用的CSS属性有所不同，比如有的用display，有的用margin或者text-indent，如果对这些属性不是很了解，可以参考入门教程中的相关资料，本文中对具体的代码功能就不一一解析了。

2.单像素图片方法

  1. <style>
  2. #header {
  3. width: 329px;
  4. height: 25px;
  5. background-image: url(attachments/month_0803/sample-opaque.gif);
  6. }
  7. #header span {
  8. display: none;
  9. }
  10. </style>
  11. <h3 id="header">
  12. <img src="attachments/month_0803/shim.gif" alt="Revised Image Replacement" />
  13. <span>Revised Image Replacement</span>
  14. </h3>

Darvas提出的这种方法，基本原理与FIR相同，改进的是它还通过添加一张单像素GIF透明图像来加载ALT文本；

不足：增加了一个额外的无意义标签。

3.Radu方法

  1. <style>
  2. #header {
  3. background: url(attachments/month_0803/sample-opaque.gif) no-repeat top right;
  4. width: 2329px;
  5. height: 25px;
  6. margin: 0 0 0 -2000px;
  7. }
  8. </style>
  9. <h3 id="header">
  10. Revised Image Replacement
  11. </h3>

Radu的方法是通过设置大负值margin来实现文本隐藏，并且在IE5.0中有效；

不足：“图像关闭/CSS开启”的情况下无效。

4.Leahy/Langridge方法

  1. <style>
  2. #header {
  3. padding: 25px 0 0 0;
  4. overflow: hidden;
  5. background-image: url(attachments/month_0803/sample-opaque.gif);
  6. background-repeat: no-repeat;
  7. height: 0px !important;
  8. height /**/:25px;
  9. }
  10. </style>
  11. <h3 id="header">
  12. Revised Image Replacement
  13. </h3>

Leahy/Langridge的方法不需要额外的span标签，并且理论上通过设置overflow属性为hidden解决了其可访问性的问题；

不足：“图像关闭/CSS开启”的情况下无效，在IE5中需要盒模型纠正。

5.Phark方法

  1. <style>
  2. #header {
  3. text-indent: -100em;
  4. overflow: hidden;
  5. background: url(attachments/month_0803/sample-opaque.gif);
  6. width: 329px;
  7. height: 25px;
  8. }
  9. </style>
  10. <h3 id="header">
  11. Revised Image Replacement
  12. </h3>

Phark的方法利用text-indent来隐藏文本，在JAWS阅读器上验证通过了其有效性；

不足：“图像关闭/CSS开启”的情况下无效，IE5中无效。

[ 以下内容您也可能感兴趣 ]

Categories: DIV+CSS重构标准

Tags: ,

Subscribe to Comments

Add a Comment