本文介绍了一种在Internet Explorer 6浏览器中实现PNG图片透明效果的方法。通过使用AlphaImageLoader滤镜，可以解决IE6不支持PNG透明的问题，并提供了一个实际的代码示例。需要注意的是，应用此滤镜后可能导致链接失效，可通过设置position属性来解决。
使用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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="wrap"></div>
</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;
}
扫一扫
951
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
