CSS高级技巧:图片替换

图像替换技术有相当的 用处, 特殊是注 重视觉的设计, 而且在 定然程度上也不会影响非可视化阅读器的消费者群(屏幕阅读器).
本节用到的图片惟独一个:

在文字外包上一组span标签, 并在CSS中将这个span进行display:none 操作, 使其 潜藏, 而后在原文字的容器的CSS中外加background-image, 以达到图像替换.

<h3 id="header"> <span>Revised Image Replacement</span> </h3>

CSS代码 大体如下:

#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}<BR>#header span {display: none;}

缺陷:
屏幕阅读器会略过定义 display:none 的容器, 会招致那 部分消费者 无奈 得悉目前的文字内容, 而且需求一个 彻底没有语义的span标签 实现这个 动机. 在关闭图像, 启用CSS的状况下, 消费者得不到该有的内容. 单像素<img>替换
与经典FIR 类似, 用span将文字 潜藏, 而且在span外, 原父容器中外加一个1像素透明图片, 而且将被 潜藏的文字加到该图片的alt属性中, 利用在图片不可用的状况下, 使用alt中的文字替换图像的原理, 运消费者在关闭图像, 启用CSS的状况下也能得到文字信息.
HTML代码如下:

<h3 id="header"><BR><img src="shim.gif" alt="Revised Image Replacement" /><BR><span>Revised Image Replacement</span><BR></h3>

CSS代码 大体如下:
#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}<BR>#header span {display: none;}

缺陷:
无语义标签. Radu 步骤
与Phark 步骤 类似, 通过给予文字一个外补丁来达到 潜藏的 动机. Radu只运行于IE5
HTML代码如下:
<h3 id="header"><BR>Revised Image Replacement<BR></h3> <BR>

CSS代码 大体如下:
#header {background: url(sample-opaque.gif) no-repeat top right;width: 2329px;height: 25px;margin: 0 0 0 -2000px;} <BR>

缺陷:
同样 无奈在关闭图像,开启CSS的状况下 无奈猎取内容. Leahy/Langridge 步骤
利用 overflow:hidden 以及 padding 的 特点,将文字达到 潜藏的 动机.
HTML代码如下:

<h3 id="header"><BR>Revised Image Replacement<BR></h3> <BR>

CSS代码 大体如下:
#header {<BR>padding: 25px 0 0 0;<BR>overflow: hidden;<BR>background-image: url(sample-opaque.gif);<BR>background-repeat: no-repeat;<BR>height: 0px !important;<BR>height /**/:25px;<BR>} <BR>

缺陷:
同样在关闭图像,开启CSS的状况下 无奈猎取内容, 而且因为IE的Box原型问题, 需求用到Hack. 详见译文. Phark 步骤
利用 text-indent 的 特点来达到 潜藏文字的 动机.
HTML代码如下:

<h3 id="header"><BR>Revised Image Replacement<BR></h3> <BR>CSS代码 大体如下: <BR>#header {<BR>text-indent: -100em;<BR>overflow: hidden;<BR>background: url(sample-opaque.gif);<BR>height: 25px;<BR>}

 
缺陷:
同样不能显示在: 关闭图像,开启CSS的状况下. Dwyer 步骤
经典FIR的一种变体, 利用overflow:hidden 的 特点, 使得全部 设施都能猎 守信息, 包括非可视化阅读器.
HTML代码如下: 
<h3 id="header"><BR><span>Revised Image Replacement</span><BR></h3>

 
CSS代码 大体如下:

#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}<BR>#header span {display: block;width: 0;height: 0;overflow: hidden;} <BR>

缺陷:
同样的不能显示在: 关闭图像,开启CSS的状况下, 仍旧需求额外的无语义的span标签. Gilder/Levin 步骤
解决了在关闭图像 开启CSS状况下的显示问题, 而且使得 几乎全部的 设施都 可以猎取到文本信息.
HTML代码如下:

<h3 id="header"><BR><span></span>Revised Image Replacement<BR></h3> <BR>

CSS代码 大体如下:
#header {width: 329px;height: 25px;position: relative;}<BR>#header span {background: url(sample-opaque.gif) no-repeat;position: absolute;width: 100%;height: 100%;} <BR>

缺陷:
使用 彻底空白的非语义标签span, 替换用图片假如是透明背景的话, 文字没 步骤被 潜藏. Lindsay 步骤
Lindsay将文字设置为1px, 并将文字 色彩设置成替换用图片背景的 色彩.
HTML代码如下: 
<h3 id="header"><BR>Revised Image Replacement<BR></h3>

 
CSS代码 大体如下: 
#header {<BR>background: url(sample-opaque.gif) no-repeat;<BR>width: 329px;<BR>height: 25px;<BR>font-size: 1px; <BR>color: #xxxxxx;<BR>}

 
缺陷:
不得不用在纯色背景的替换用图片的状况下, 而且在关闭图像 开启CSS的状况下同样 无奈猎 守信息. Shea 加强版
Shea为容器外加了title属性, title中包括将被 潜藏的文字, 通过这种 步骤来达到一种鼠标激活工具 揭示的一种 动机来让消费者猎 守信息.
HTML代码如下: 
<h3 id="header" title="Revised Image Replacement"><BR><span></span>Revised Image Replacement<BR></h3>

 
CSS代码如下:
#header {width: 329px;height: 25px;position: relative;}<BR>#header span {background: url(sample-opaque.gif) no-repeat;position: absolute;width: 100%;height: 100%;} <BR>

缺陷:
多余的空白无语义span标签...
以上 几乎是现存全部的图像替换 步骤, 各有优缺陷, 依照自己的状况选用吧.