CSS高级技巧:图片替换

缺点:

使用完全空白的非语义标签span, 替换用图片如果是透明背景的话, 文字没办法被隐藏.

Lindsay 方法

Lindsay将文字设置为1px, 并将文字颜色设置成替换用图片背景的颜色.

HTML代码如下:

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

CSS代码大致如下:

#header {
    background: url(sample-opaque.gif) no-repeat;
    width: 329px;
    height: 25px;
    font-size: 1px;
    color: #xxxxxx;
 }

缺点:

只能用在纯色背景的替换用图片的情况下, 而且在关闭图像 开启CSS的情况下同样无法获取信息.

Shea 加强版

Shea为容器加上了title属性, title中包含将被隐藏的文字, 通过这种方法来达到一种鼠标激活工具提示的一种效果来让用户获取信息.

HTML代码如下:

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

CSS代码如下:

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

缺点:

多余的空白无语义span标签...

以上几乎是现存所有的图像替换方法, 各有优缺点, 按照自己的情况选用吧.

下一篇CSS教程 文章：CSS高级技巧:滑动门

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