上一篇 文章： Webjx.Com 图像替换技术有相当的用处, 特别是注重视觉的设计, 而且在一定程度上也不会影响非可视化浏览器的用户群(屏幕阅读器). 本节用到的图片只有一个: 网页教学网 经典FIR在文字外包上一组span标签, 并在CSS中将这个span进行display:none 操作, 使其隐藏, 然后在原文字的容器的CSS中加上background-image, 以达到图像替换. HTML代码如下: CSS代码大致如下: 网页教学网 #header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}#header span {display: none;} 网页教学网 缺点: 屏幕阅读器会略过定义 display:none 的容器, 会导致那部分用户无法得知当前的文字内容, 而且需要一个完全没有语义的span标签完成这个效果. 在关闭图像, 启用CSS的情况下, 用户得不到该有的内容. 单像素替换与经典FIR类似, 用span将文字隐藏, 并且在span外, 原父容器中加上一个1像素透明图片, 并且将被隐藏的文字加到该图片的alt属性中, 利用在图片不可用的情况下, 使用alt中的文字替换图像的原理, 使用户在关闭图像, 启用CSS的情况下也能得到文字信息. HTML代码如下: 网页教学网 网页教学网 CSS代码大致如下: 网页教学网 #header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}#header span {display: none;} 缺点: Webjx.Com 无语义标签. Radu 方法与Phark方法类似, 通过赋予文字一个外补丁来达到隐藏的效果. Radu只运行于IE5 网页教学网 HTML代码如下: Webjx.Com 网页教学网 CSS代码大致如下: 网页教学网 #header {background: url(sample-opaque.gif) no-repeat top right;width: 2329px;height: 25px;margin: 0 0 0 -2000px;} 缺点: Webjx.Com 同样无法在关闭图像,开启CSS的情况下无法获取内容. 网页教学网 Leahy/Langridge 方法利用 overflow:hidden 以及 padding 的特性,将文字达到隐藏的效果. Webjx.Com HTML代码如下: Webjx.Com 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 的特性来达到隐藏文字的效果. Webjx.Com HTML代码如下: 网页教学网 Webjx.Com CSS代码大致如下: 网页教学网 #header { text-indent: -100em; overflow: hidden; background: url(sample-opaque.gif); height: 25px; } 缺点: 同样不能显示在关闭图像,开启CSS的情况下, 而且无法在IE5中运行. Phark 方法2修复了Phark 1中Safari显示滚动条的问题, 和IE5中无法运行的问题. HTML代码如下: Webjx.Com CSS代码大致如下: 网页教学网 #header { text-indent: -5000px; background: url(sample-opaque.gif); height: 25px; } 网页教学网 缺点: 同样不能显示在: 关闭图像,开启CSS的情况下. Webjx.Com Dwyer 方法经典FIR的一种变体, 利用overflow:hidden 的特性, 使得所有设备都能获取信息, 包括非可视化浏览器. Webjx.Com HTML代码如下: 网页教学网 CSS代码大致如下: 网页教学网 #header {width: 329px;height: 25px;background-image: url(sample-opaque.gif);}#header span {display: block;width: 0;height: 0;overflow: hidden;} Webjx.Com 缺点: 网页教学网 同样的不能显示在: 关闭图像,开启CSS的情况下, 仍旧需要额外的无语义的span标签. Gilder/Levin 方法解决了在关闭图像 开启CSS情况下的显示问题, 并且使得几乎所有的设备都可以获取到文本信息. Webjx.Com HTML代码如下: 网页教学网 CSS代码大致如下: #header {width: 329px;height: 25px;position: relative;}#header span {background: url(sample-opaque.gif) no-repeat;position: absolute;width: 100%;height: 100%;} 缺点: 网页教学网 使用完全空白的非语义标签span, 替换用图片如果是透明背景的话, 文字没办法被隐藏. Lindsay 方法Lindsay将文字设置为1px, 并将文字颜色设置成替换用图片背景的颜色. Webjx.Com HTML代码如下: CSS代码大致如下: #header { background: url(sample-opaque.gif) no-repeat; width: 329px; height: 25px; font-size: 1px; color: #xxxxxx; } 缺点: 只能用在纯色背景的替换用图片的情况下, 而且在关闭图像 开启CSS的情况下同样无法获取信息. Shea 加强版Shea为容器加上了title属性, title中包含将被隐藏的文字, 通过这种方法来达到一种鼠标激活工具提示的一种效果来让用户获取信息. Webjx.Com HTML代码如下: CSS代码如下: 网页教学网 #header {width: 329px;height: 25px;position: relative;}#header span {background: url(sample-opaque.gif) no-repeat;position: absolute;width: 100%;height: 100%;} 缺点: 多余的空白无语义span标签... Webjx.Com 以上几乎是现存所有的图像替换方法, 各有优缺点, 按照自己的情况选用吧. 网页教学网 下一篇 文章： Webjx.Com
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
