CSS高级技巧之图片替换

时间:2008-06-16 06:04:23  来源:中国教程网论坛  作者:  【背景色 】

　　图像替换技术有相当的用处, 特别是注重视觉的设计, 而且在一定程度上也不会影响非可视化浏览器的用户群(屏幕阅读器).

　　本节用到的图片只有一个:

　　经典FIR

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

　　HTML代码如下:

　　＜h3 id="header"＞

　　 ＜span＞Revised Image Replacement＜/span＞

　　＜/h3＞

　　CSS代码大致如下:

　　#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}

　　#header span {display: none;}

　　缺点:

　　屏幕阅读器会略过定义 display:none 的容器, 会导致那部分用户无法得知当前的文字内容, 而且需要一个完全没有语义的span标签完成这个效果. 在关闭图像, 启用CSS的情况下, 用户得不到该有的内容.

　　单像素＜img＞替换

　　与经典FIR类似, 用span将文字隐藏, 并且在span外, 原父容器中加上一个1像素透明图片, 并且将被隐藏的文字加到该图片的alt属性中, 利用在图片不可用的情况下, 使用alt中的文字替换图像的原理, 使用户在关闭图像, 启用CSS的情况下也能得到文字信息.

　　HTML代码如下:

　　＜h3 id="header"＞

　　 ＜img src="shim.gif" alt="Revised Image Replacement" /＞

　　 ＜span＞Revised Image Replacement＜/span＞

　　＜/h3＞

　　CSS代码大致如下:

　　#header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}

　　#header span {display: none;}

　　缺点:

　　无语义标签.

　　Radu 方法

　　与Phark方法类似, 通过赋予文字一个外补丁来达到隐藏的效果. Radu只运行于IE5

　　HTML代码如下:

　　＜h3 id="header"＞

　　 Revised Image Replacement

　　＜/h3＞

　　CSS代码大致如下:

　　#header {background: url(sample-opaque.gif) no-repeat top right;width: 2329px;height: 25px;margin: 0 0 0 -2000px;}

　　缺点:

　　同样无法在关闭图像,开启CSS的情况下无法获取内容.

　　Leahy/Langridge 方法

　　利用 overflow:hidden 以及 padding 的特性,将文字达到隐藏的效果.

　　HTML代码如下:

　　＜h3 id="header"＞

　　 Revised Image Replacement

　　＜/h3＞

　　CSS代码大致如下:

　　#header {

　　 padding: 25px 0 0 0;

　　 overflow: hidden;

　　 background-image: url(sample-opaque.gif);

　　 background-repeat: no-repeat;

　　 height: 0px !important;

　　 height /**/:25px;

　　 }

　　缺点:

　　同样在关闭图像,开启CSS的情况下无法获取内容, 而且由于IE的Box原型问题, 需要用到Hack. 详见译文.

　　Phark 方法

　　利用 text-indent 的特性来达到隐藏文字的效果.

　　HTML代码如下:

　　＜h3 id="header"＞

　　 Revised Image Replacement

　　＜/h3＞

　　CSS代码大致如下:

　　#header {

　　 text-indent: -100em;

　　 overflow: hidden;

　　 background: url(sample-opaque.gif);

　　 height: 25px;

　　 }

　　缺点:

　　同样不能显示在关闭图像,开启CSS的情况下, 而且无法在IE5中运行.

　　Phark 方法2

　　修复了Phark 1中Safari显示滚动条的问题, 和IE5中无法运行的问题.

　　HTML代码如下:

　　＜h3 id="header"＞

　　 Revised Image Replacement

　　＜/h3＞

　　CSS代码大致如下:

　　#header {

　　 text-indent: -5000px;

　　 background: url(sample-opaque.gif);

　　 height: 25px;

　　 }

　　缺点:

　　同样不能显示在: 关闭图像,开启CSS的情况下.