关于ie下的png图片有关问题
日期：2014-05-16 浏览次数：20397 次
关于ie下的png图片问题
如何用 js 或css控制png图片透明
------解决方案--------------------
楼主 搜下
pngfix.js
------解决方案--------------------
滤镜
PNG(Portable Network Graphics)格式图片可以表现更为绚丽多彩的颜色，常见的一些具有矢量效果的图片、图标都采用png格式，但是具有透明背景的png格式图片在IE6中却不是背景透明的，透明背景部分会显示出#DBEAED的淡灰色，表现效果很糟糕，为了使用透明背景图片只有采用gif格式了，但是gif格式会出现明显的锯齿效果，所以只有设法修复IE6的这个问题。解决的办法就是使用IE的Microsoft.AlphaImageLoader滤镜。
方法一：
IE6与原本支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。对于非动画的GIF可以使用PNG8，同时体积也会更小。但这种办法是以牺牲图片质量为代价的，而且实施也不太容易！
--------------------------------------------
方法二：
如果希望使用png格式图片作为DOM元素的背景，那么就可以使用滤镜来加载png图片
.png{ background: url(/angel.png) no-repeat !important; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/angel.png",sizingMethod='scale'); _background:none; width:100px; height:100px;}HTML代码：<div class="png"> 背景PNG透明<div>--------------------------------------------
设置滤镜作用的对象的图片在对象容器边界内的显示方式。 可取值包含如下几个：
crop:剪切图片以适应对象尺寸（如果图片比对象尺寸大）。
image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale:缩放图片以适应对象的尺寸边界。可平铺
以上代码使用了一些IE的Hack，IE7，IE8，Firefox直接应用_background，IE6则会应用filter！
方法三：
如果png格式的图片不是用来做元素背景，而是直接引入的img图像，那么方法二就无法应用了，那么此时可以把此img标签的src属性替换为一张空的透明gif图像，然后再按照方法二把png图片加载为元素的背景就可以了。首先要准备一张空白透明的gif图片，一般命名为blank.gif或space.gif或transparent.gif，然后就可以替换png图像了。但是手工替换不太现实，最好一段代码就解决问题：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>替换pngtitle>
<style type="text/css">
.mypng img {
azimuth: expression(
this.pngSet?this.pngSet=true:
(this.nodeName == "IMG" &&
this.src.toLowerCase().indexOf('.png')>-1?
(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif")
:(this.origBg = this.origBg?
this.origBg
:this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),
this.pngSet=true);
}
style>
head>
<body>
换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />
<div>
<body>
<html>--------------------------------------------
以上代码使用了仅IE支持的CSS表达式完成替换与设置滤镜背景的工作。
同样的工作也可以由Javascript来完成：
--------------------------------------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自动替换png图片</title>
<script language="JavaScript">
function correctPNG(){ // correctly handle PNG transparency in Win IE 5.5 & 6.
var arVersion = navigator.appVersion.split("MSIE")
如何用 js 或css控制png图片透明
------解决方案--------------------
楼主 搜下
pngfix.js
------解决方案--------------------
滤镜
PNG(Portable Network Graphics)格式图片可以表现更为绚丽多彩的颜色，常见的一些具有矢量效果的图片、图标都采用png格式，但是具有透明背景的png格式图片在IE6中却不是背景透明的，透明背景部分会显示出#DBEAED的淡灰色，表现效果很糟糕，为了使用透明背景图片只有采用gif格式了，但是gif格式会出现明显的锯齿效果，所以只有设法修复IE6的这个问题。解决的办法就是使用IE的Microsoft.AlphaImageLoader滤镜。
方法一：
IE6与原本支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。对于非动画的GIF可以使用PNG8，同时体积也会更小。但这种办法是以牺牲图片质量为代价的，而且实施也不太容易！
--------------------------------------------
方法二：
如果希望使用png格式图片作为DOM元素的背景，那么就可以使用滤镜来加载png图片
.png{ background: url(/angel.png) no-repeat !important; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/angel.png",sizingMethod='scale'); _background:none; width:100px; height:100px;}HTML代码：<div class="png"> 背景PNG透明<div>--------------------------------------------
设置滤镜作用的对象的图片在对象容器边界内的显示方式。 可取值包含如下几个：
crop:剪切图片以适应对象尺寸（如果图片比对象尺寸大）。
image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale:缩放图片以适应对象的尺寸边界。可平铺
以上代码使用了一些IE的Hack，IE7，IE8，Firefox直接应用_background，IE6则会应用filter！
方法三：
如果png格式的图片不是用来做元素背景，而是直接引入的img图像，那么方法二就无法应用了，那么此时可以把此img标签的src属性替换为一张空的透明gif图像，然后再按照方法二把png图片加载为元素的背景就可以了。首先要准备一张空白透明的gif图片，一般命名为blank.gif或space.gif或transparent.gif，然后就可以替换png图像了。但是手工替换不太现实，最好一段代码就解决问题：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>替换pngtitle>
<style type="text/css">
.mypng img {
azimuth: expression(
this.pngSet?this.pngSet=true:
(this.nodeName == "IMG" &&
this.src.toLowerCase().indexOf('.png')>-1?
(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif")
:(this.origBg = this.origBg?
this.origBg
:this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),
this.pngSet=true);
}
style>
head>
<body>
换成你的png图片
<div class="mypng">
<img src="icon_face_07.png" width="30" height="30" />
<img src="icon_face_10.png" width="30" height="30" />
<img src="icon_face_08.png" width="30" height="30" />
<div>
<body>
<html>--------------------------------------------
以上代码使用了仅IE支持的CSS表达式完成替换与设置滤镜背景的工作。
同样的工作也可以由Javascript来完成：
--------------------------------------------
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自动替换png图片</title>
<script language="JavaScript">
function correctPNG(){ // correctly handle PNG transparency in Win IE 5.5 & 6.
var arVersion = navigator.appVersion.split("MSIE")
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
