CSS实现PNG图片背景透明效果

来源：互联网发布：外贸开发信软件编辑：程序博客网时间：2024/05/16 07:25

使用PNG图片作背景,但ie6不能显示PNG透明效果,所以要用AlphaImageLoader滤镜来实现.在CSS文件中要注意图片相对路径:滤镜中的图片路径是相对页面文件,而其它的则是相对CSS文件(注意加粗字).用这滤镜后IE下链接会失效,用 position: relative;解决这个问题.

以下是代码例子:

Default.aspx代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

</form>

</body>

</html>

css/StyleSheet.css:

#wrap

{

margin: auto;

padding: 8px;

text-align: center;

width: 880px;

height: 606px;

}

/*not for ie 6.0*/

html > body #wrap

{

background: url(../css/img/background.png) no-repeat left top;

}

/*for ie 6.0*/

* html #wrap

{

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src= "css/img/background.png" );

background: none;

}

#wrap a

{

color: #c00;

text-decoration: none;

position: relative;

}/*解决IE下链接失效的问题*/

#wrap a:hover

{

text-decoration: underline;

}