CSS高级技巧:图片替换

上一篇CSS教程 文章：CSS高级技巧:CSS Sprites

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

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

经典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 {
  &nbs

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!