IE下使用透明滤镜出现锯齿解决办法

  IE浏览器下使用alpha透明滤镜时,文字或者图片边缘会出现锯齿,测试代码

<!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>IE下使用透明滤镜出现锯齿</title>
<style> 
 img{border:none}
.header_s_li{width:245px; height:43px;}
.header_s_li ul li{width:43px; height:43px; float:left; margin-left:6px; _margin-left:3px;filter:Alpha(opacity=30);opacity: 0.3; overflow:hidden;}
.header_s_li ul li a{width:100%; height:100%; display:block;}
</style>
</head>
<body>
<div class="header_s_li">
<ul>
<li class="h1"><a  href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li>
<li><a  href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.pngg" /></a></li>
<li><a  href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li>
<li><a  href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li>
<li><a  href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li>
</ul>
</div>
</body>
</html>

效果如下

IE下使用透明滤镜出现锯齿解决办法

  解决办法就是给使用alpha滤镜的对象增加一个背景色即可。

<!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>IE下使用透明滤镜出现锯齿解决办法</title>
<style>
 img{border:none}
.header_s_li{width:245px; height:43px;}
.header_s_li ul li{width:43px; height:43px; float:left; margin-left:6px; _margin-left:3px;filter:Alpha(opacity=30);opacity: 0.3; overflow:hidden;background:#c0dcc0;/*IE下使用透明滤镜出现锯齿增加背景色即可解决锯齿问题*/}
.header_s_li ul li a{width:100%; height:100%; display:block;}
</style>
</head>
<body>
<div class="header_s_li">
<ul>
<li class="h1"><a  href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li>
<li><a  href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.pngg" /></a></li>
<li><a  href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li>
<li><a  href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li>
<li><a  href="#"><img class="ddd" src="http://img02.taobaocdn.com/imgextra/i2/723902727/T2WNeFXoXbXXXXXXXX_!!723902727.png" /></a></li>
</ul>
</div>
</body>
</html>

IE下使用透明滤镜出现锯齿解决办法


原创文章,转载请注明出处:IE下使用透明滤镜出现锯齿解决办法

评论(0)Web开发网
阅读(146)喜欢(0)HTML/CSS兼容/XML