编程 Javascript

png在IE6 下无法透明的解决方法汇总

Posted in Javascript onMay 21, 2015

FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的

style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')"

语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。

sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。

src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

特性：
Enabled : 可读写。布尔值(Boolean)。参阅 enabled 属性。
sizingMethod : 可读写。字符串(String)。参阅 sizingMethod 属性。
src : 可读写。字符串(String)。参阅 src 属性。

说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。

实例：解决IE6下png透明失效的问题。

CSS样式:

.png{
_background: url(images/angel.png) no-repeat !important; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src="images/angel.png");
background:none;
width:118px;height:133px;
}

.png div{position:relative;}

HTML代码：

<div class="png">
<div>
CSS 背景PNG透明 及 链接失效问题解决
</div>
</div>

/*
兼容IE6.0、IE7.0、FF，
IE7.0和新版的FF其实是可以不加filter滤镜直接透明的。
*/

=============================================================================

方法一:定义一个样式,给某个div应用这个样式后，div的透明png背景图片自动透明了。（注意两处图片的路径写法不一样，本例中，icon_home.png图片与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>无标题文档</title>
<style type="text/css">
<!--
.qq {
height: 90px;
width: 90px;
background-image: url(icon_home.png)!important;/* FF IE7 */
background-repeat: no-repeat;

_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png'); /* IE6 */
_ background-image: none; /* IE6 */
}
-->
</style>
</head>

<body>

<div class="qq"></div>

</body>
</html>

方法二: 给img定义样式，页面上所有透明png即自动透明了。（这方法只对直接插入的图片有效，对背景图无效）注意，要准备一个透明的小图片transparent.gif,大小不限。必须放在和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>无标题文档</title>
<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>

方法三:用JS实现,加上一段js代码后,所有插入的透明png自动透明了.（注意，这方法也是只对直接插入的图片有效，对背景图无效）

<!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>无标题文档</title>
<script language="JavaScript"> 
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6. 
{ 
  var arVersion = navigator.appVersion.split("MSIE") 
  var version = parseFloat(arVersion[1]) 
  if ((version >= 5.5) && (document.body.filters)) 
  { 
    for(var j=0; j<document.images.length; j++) 
    { 
     var img = document.images[j] 
     var imgName = img.src.toUpperCase() 
     if (imgName.substring(imgName.length-3, imgName.length) == "PNG") 
     { 
       var imgID = (img.id) ? "id='" + img.id + "' " : "" 
       var imgClass = (img.className) ? "class='" + img.className + "' " : "" 
       var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' " 
       var imgStyle = "display:inline-block;" + img.style.cssText 
       if (img.align == "left") imgStyle = "float:left;" + imgStyle 
       if (img.align == "right") imgStyle = "float:right;" + imgStyle 
       if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 
       var strNewHTML = "<span " + imgID + imgClass + imgTitle 
       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
       img.outerHTML = strNewHTML 
       j = j-1 
     } 
    } 
  }   
} 
window.attachEvent("onload", correctPNG); 
</script>
<style type="text/css">
<!--
body {

}
-->
</style></head>

<body>
把图片换成你自己的图片
<img src="img/icon_face_03.png" width="30" height="30" /><!--把图片换成你自己的图片 -->
<img src="img/icon_face_05.png" width="30" height="30" />
<img src="img/menu_title_over.png" width="130" height="36" />
</body>
</html>

方法四

<script language="javascript">
// 修复 IE 下 PNG 图片不能透明显示的问题
function fixPNG(myImage) {
var arVersion = navigator.appVersion.split("MSIE");
var version = parseFloat(arVersion[1]);
if ((version >= 5.5) && (version < 7) && (document.body.filters))
{
   var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
   var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
   var imgTitle = (myImage.title) ? "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' ";
   var imgStyle = "display:inline-block;" + myImage.style.cssText;
   var strNewHTML = "<span " + imgID + imgClass + imgTitle

  + " style=\"" + "width:" + myImage.width

  + "px; height:" + myImage.height

  + "px;" + imgStyle + ";"

  + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

  + "(src=\'" + myImage.src + "\', sizingMethod='scale');\"></span>";
   myImage.outerHTML = strNewHTML;
} } 

window.onload=function(){
     document.getElementById("top").style.height=screen.height/5+"px";
    
}//
</script>

用法如下：

<img src="logo.png" width="328" height="325" border="0" onload="fixPNG(this)" />

以上所述就是本文的全部内容了，希望大家能够喜欢。

png在IE6 下无法透明的解决方法汇总

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

setTimeout与setInterval在不同浏览器下的差异

Jan 24 Javascript

javascript中的一些注意事项更新中

Dec 06 Javascript

基于jQuery的history历史记录插件

Dec 11 Javascript

js中的数组Array定义与sort方法使用示例

Aug 29 Javascript

原生javascript实现的分页插件pagenav

Aug 28 Javascript

JS实现动态生成表格并提交表格数据向后端

Nov 25 Javascript

JS实现CheckBox复选框全选、不选或全不选功能

Jul 28 Javascript

JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别

May 31 Javascript

BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题

Dec 28 Javascript

详解JSON Web Token 入门教程

Jul 30 Javascript

node.js文件操作系统实例详解

Nov 05 Javascript

基于elementUI竖向表格、和并列的案例

Oct 26 Javascript

javascript相关事件的几个概念

May 21 #Javascript

javascript实时显示当天日期的方法

May 20 #Javascript

JavaScript中String.prototype用法实例

May 20 #Javascript

实现无刷新联动例子汇总

May 20 #Javascript

javascript中CheckBox全选终极方案

May 20 #Javascript

javascript消除window.close()的提示窗口

May 20 #Javascript

在JS方法中返回多个值的方法汇总

May 20 #Javascript