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>
效果如下
解决办法就是给使用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下使用透明滤镜出现锯齿解决办法