导航

透明PNG背景图片的CSS设置

Posted on 2007-09-27 12:01  Ralph  阅读(5986)  评论(0)    收藏  举报
IE7和Firefox支持PNG图片的透明效果，IE6不支持，不过可以通过AlphaImageLoader滤镜来解决。

AlphaImageLoader
语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性：
enabled :可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
　　　　　　true : 默认值。滤镜激活。
　　　　　　false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
　　　　　　　　image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
　　　　　　　　scale : 缩放图片以适应对象的尺寸边界。
　　　　　　　　src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

一个例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Background using PNG</title>
<style type="text/css">
body {
    background:url(bodyBg.jpg) repeat-x;
}
a {
    text-decoration:none;
    color:#333333;
}
a:hover {
    color:#999999;
}
/* For IE7 and Firefox */
html>body #wrap {
    width:600px;
    height:400px;
    border:1px solid #ccc;
    background-image:url(transparent.png);
}
/* End For IE7 and Firefox */

/* For IE6 Only */
*html #wrap {
    width:600px;
    height:400px;
    border:1px solid #ccc;
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="transparent.png");
}
/* End For IE6 Only */

#content {
    position:relative; /* AlphaImageLoader滤镜会导致该区域的链接和按钮无效，将position设置为relative可以解决该问题 */
}
</style>
</head>
<body>
<div id="wrap">
  <div id="content"> <a href="http://www.google.cn">Google</a> <span>abcde</span></div>
</div>
</body>
</html>

运行示例