关于PNG图片透明的兼容性_糖糖

个人资料

糖糖

微博

正文字体大小：大中小

关于PNG图片透明的兼容性

(2012-02-20 08:49:48)

标签：

分类：技能

PNG确实是个好东西，因为做透明时比GIF更好，更因为它支持半透明。想想用渐变透明滴图片就是爽啊，所以俺一般做透明图片时就用它了，可惜【IE6】却不理解它，唉。总算是天木绝俺，让俺找到个方法解决掉【IE6】了...

IE：
使用【IE专署滤镜】让【IE6】支持PNG透明，该滤镜滴解释俺亦不知道~反正是可以这样用。

FF
除了【IE6以及以下版本】以外，好似别滴浏览器都支持PNG透明，所以直接使用png做背景。

兼容处理
这里要注意滴是，一定不能让【IE6】读到背景了，不然会跟滤镜冲突。所以使用!important让【IE6】下无背景图片。

程序代码
<!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=gb2312" />
<title>关于PNG图片透明的兼容性</title>
<style type="text/css">
div.bg {
width:80px;
height:50px;
background:red url(http://blog.pr1984.com/attachments/month_0608/s200682313415.png)!important;
background:red;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blog.pr1984.com/attachments/month_0608/s200682313415.png',sizingMethod='image');
}
</style>
</head>
<body>
<h4>红色背景：</h4>
<div class="bg"></div>
<h4>原始图片：</h4>
<img src="http://blog.pr1984.com/attachments/month_0608/s200682313415.png" alt="原始图片" />
</body>
</html>

HTML代码<!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=gb2312" /> <title>关于PNG图片透明的兼容性</title> <style type="text/css"> div.bg { width:80px; height:50px; background:red url(http://blog.pr1984.com/attachments/month_0608/s200682313415.png)!important; background:red; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://blog.pr1984.com/attachments/month_0608/s200682313415.png',sizingMethod='image'); } </style> </head> <body> <h4>红色背景：</h4> <div class="bg"></div> <h4>原始图片：</h4> <img src="http://blog.pr1984.com/attachments/month_0608/s200682313415.png" alt="原始图片" /> </body> </html>

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report