PNG图片透明的兼容解决方法

互诺科技：2009-10-22 16:35 阅读数：标签：

PNG格是的图片确实是非常好用，做透明图片时，她的效果要比Gif好很多，并且它还支持半透明。其实这样的需求每一个设计师和制作都时常需要的，可惜“IE6”却不买PNG透明的帐。

很多设计师和网页制作居然想出了一个办法，称之为——拒绝“IE6”，也就是说，当用户用IE6访问该页面时，网页拒绝让丫看，呵呵，这方法道是也不错，当然，那是对于个人站点而言，如果是商业站点，这样的做法损失会很大。

也算是天木绝银之路吧，终于找到个方法解决掉“IE6”不能正常显示透明PNG的问题了...

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=utf-8" />
<title>关于PNG图片透明的兼容性</title>
<style type="text/css">
div.bg {
width:440px;
height:100px;
background:#cc0000 url(http://sixtyears.cn/wp-content/themes/moren/images/logo.png)!important; /* 提升改段属性优先权，让IE7与非IE浏览器读取背景图片。 */
/* background:#cc0000;设置背景色为：呐喊红，并覆盖上一段背景图片的设置。*/
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://sixtyears.cn/wp-content/themes/moren/images/logo.png',sizingMethod='image'); /* 使用IE专属滤镜，让PNG图片背景透明。 */
}
</style>
</head>
<body>
<h4>呐喊红色背景：</h4>
<div class="bg">12354</div>
<h4>原始图片：</h4>
<img src="http://sixtyears.cn/wp-content/themes/moren/images/logo.png" alt="原始图片" />
</body>

site topic网站专题

首页

网站专题

专题详情

分享新闻到：

PNG图片透明的兼容解决方法

互诺科技：2009-10-22 16:35 阅读数：标签：

020-22265030

0755-23915687

021-32265355

0757-88376239

site topic网站专题

首页

网站专题

专题详情

分享新闻到：

PNG图片透明的兼容解决方法

互诺科技：2009-10-22 16:35 阅读数： 标签：

020-22265030

0755-23915687

021-32265355

0757-88376239

互诺科技：2009-10-22 16:35 阅读数：标签：