css之图像替换

time: 2016-03-30 20:00

这个月有点忙，学业的事工作的事私人的事有点烦，但是不能停止学习更不能忘记写博客！最近看了《精通css》这本书，挑了一个点纪录一下。

一.含义

图像替代，就是像我们在平时将文本添加到文本中，然后通过css隐藏文本在它的位置上显示一个背景图片，这样，搜索引擎仍然可以搜到HTML文本，即使我们禁用css后，文本时仍然是可以显示的。

引用《精通css》中的一段解释：

HTML文本由很多的优点。文本可以被搜索引擎读取，开发人员可以对其进行复制和粘贴，并且在浏览器中改变字体大小后，它也会改变。因此很多设计人员都想尽量的采用HTML文本而不是文本的图像，但是遗憾的是，页面设计人员对于文本有有限的选择，尽管可以通过css来控制版面但是有很多字体的效果是无法实现的，所以在某些情况下还是需要用文本的图像的。图像替代，就是像我们在平时将文本添加到文本中，然后通过css隐藏文本在它的位置上显示一个背景图片，这样，搜索引擎仍然可以搜到HTML文本，即使我们禁用css后，文本时仍然是可以显示的。

引用《CSS禅意花园》中的一段解释：

图像替换技术使用display:none的本意并不只是想要替换文本，这样做还有一些更深层次的理由。实际上，若是没有任何提示或帮助，计算机就无法认出或读取图像中包含的文字。例如HTML中img元素，若是没有了alt属性，那么对于google等搜索引擎，以及辅助浏览设备（例如，屏幕阅读器即可阅读页面内容，并以声音的形式告诉浏览者）之类无法呈现图像的客户端来说，将变的豪无意义。而图像替换技术则保留了被替换元素中的原有文本，因此无论对任何客户而言，理解页面内容都不成问题。

二.图像替换实现方法

1.经典FIR，设法隐藏文字内容：（Fahrner Image Replacement）

最早开始流行的图像替换技术，也最容易理解，但是存在一些可访问性问题所依应该避免使用。

(1)把要替换的文本放在span标签中:

<h2>
<span>Hello World <span>
</h2>

(2)然后将替换图像作为背景应用于文本元素,

h2{

    background:url(替换图片.gif) no-repeat;

    width: 150px;

    height: 35px;

}

(3)将span的display设置为none，从而隐藏span的内容。

span{

display:none;

}

存在问题：

许多流行的屏幕阅读器会忽略那些display：none和visibility：hidden的元素，因为会完全忽略这个文本，造成严重的访问问题。

2.设置边距或缩进将文字弹走：Phark

不需要添加无语义的标签，也不需要使用display属性来隐藏文本，只需要对需要替换的文字进行非常大的负值首行所进。

<h2>
Hello World
</h2>

h2{

    width: 150px;

    height: 35px;

    text-indent:-5000px;(非常大的负值首行所进)

    background:url(替换图片.gif) no-repeat;

}

这个方法很好的解决了屏幕阅读器的问题，但是在关闭图像仍然打开css的情况下是无效的，虽然这种情况比较小，在网速访问非常慢的情况下或者访问者能够打开图像但是设置不打开，这些情况下一些人是看不到被替换的文本的。

3.Leahy和Langridge方法

该方法不必再添加那些多余的标签，且在保证屏幕阅读器可以正常阅读文本的同时，也能在页面中隐藏元素中的内容。但是并没有解决浏览器禁用图象后空白页面的可访问性问题。

<h2>
Hello World
</h2>

h2{

    height:0;

    padding:30px 0 0 0;

    overflow:hidden;

    background:url(替换图片.gif) no-repeat;

}

4.用额外元素覆盖住文字：Levin方法

Levin Alexander想出了一个绝妙的注意：不再将文本置放于span中，而是将其从span中移出来，将文本和span一起放在父元素中，然后使用这个空白的span覆盖文本，并将背景图像应用到span之上。繁琐的代码下，终于完美的解决了关闭图像打开CSS问题，但新的问题也随之出现，那就是图像不能是透明的，否则用户将会看到下面的文本。除此之外，文字内容没有被直接包含于任何节点之内，可能会给前端开发带来意想不到的麻烦。

<h3 class="replace" id="myh1">And a dash of Thyme.<span></span></h3>

.replace{

    position:relative;

    margin:0;

    padding:0;

}

.replace span{

    display:block;

    position:absolute;

    top:0;

    left:0;

    z-index:1;

}

/#myh1,#myh1 span{

    height:25px;

    width:300px;

    background:url(替换图像.png);

}

五.基于flash和javascript：sFIR

Mike Davidson和Shaun Inman提出了一种新的iFIR技术。该方法使用JavaScript搜索文
档中特定节点，将其中的内容替换成一小段Flash。

引用《精通css》d对这一技术的介绍：

Flash允许将字体嵌入SWF文件，所以他们并不把文本换成图像，而是用Flash文件替换文本。进行这一替换的方法是使用JavaScript搜索文档，找到特定元素或者具有特定类名的元素中的所有文本。然后JavaScript将文本替换为一个小的Flash文件。接下来是真正精明的部分。这种技术并不为每段文本创建单独的Flash文件，而是将被替换的文本放回一个重复的Flash文件中。因此，触发图像替换所要做的只是添加一个类，Flash和JavaScript会完成余下的工作。另一个好处是Flash文件中的文本是可搜索的，这意味着可以轻松地复制它。

存在问题：使用Flash替代的缺点在于改方法要求JavaScript和Flash支持，并且Flash会远大于一副普通图片，下载时会造成延迟，在较慢的电脑上页面会出现闪烁甚至停滞。

就目前来讲没有最完美的图像替换方法，但是可以用最小的代价换取效果。例如，在移动设备上可以用Levin的方法，因为一般移动设备商不会使用透明图片。而在国内，屏幕阅读器还没普及的情况下，牺牲屏幕阅读器也是可以考虑的。