CSS高级技巧:图片替换

缺点:

同样在关闭图像,开启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的情况下.

Dwyer 方法

经典FIR的一种变体, 利用overflow:hidden 的特性, 使得所有设备都能获取信息, 包括非可视化浏览器.

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: block;width: 0;height: 0;overflow: hidden;}

缺点:

同样的不能显示在: 关闭图像,开启CSS的情况下, 仍旧需要额外的无语义的span标签.

Gilder/Levin 方法

解决了在关闭图像 开启CSS情况下的显示问题, 并且使得几乎所有的设备都可以获取到文本信息.

HTML代码如下:

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

CSS代码大致如下:

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

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