ie6 png javascript

IE6在当时是一款非常流行的浏览器，然而它缺少支持png图片透明度显示的能力，这导致很多网站的图片无法展示效果，给用户带来了很差的体验。而在这种情况下，JavaScript成为了解决问题的最好工具之一，很多人开始使用JavaScript来兼容IE6的png图片显示。

一般情况下，我们在使用png图片的时候会遇到以下两种情况：

    
1. png图片带alpha通道

例如某个按钮需要在实现半透明效果时使用带透明度的png图片来作为背景。在IE6中，这种图片将会完全不透明，浏览器会将背景色呈现出来，这样看起来就像按钮的背景出现了一圈黑色的边框。

2. png图片不带alpha通道

例如我们在制作了一个标签，上面使用了带透明度的png图片，但在IE6中却没有透明效果，导致整个标签看起来非常奇怪，影响用户体验。
    

在这种情况下，我们可以使用JavaScript来兼容IE6的png图片显示。使用JavaScript来制作png图片的透明效果通常有两种方法：

方法一：使用gif图片来代替png图片，在IE6中使用gif图片来兼容png图片。

    
//首先声明一个空的gif图片
var blank = 'about:blank';

//设置需要兼容的png图片路径
var pngimgurl = "your-png-image-url-here.png";

//加载并展示图片
var img = document.createElement("img");
img.src = blank;
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaimageLoader(src='"+ pngimgurl +"',sizingMethod='scale')";
img.style.width = "100%";
img.style.height = "100%";
parentElement.appendChild(img);
    

方法二：使用CSS样式来实现透明效果，不再依赖于png图片。

    
//设置需要兼容的png图片路径
var pngimgurl = "your-png-image-url-here.png";

//加载并展示图片
var img = document.createElement("img");
img.src = pngimgurl;
img.style.display = "none";
parentElement.appendChild(img);

//设置css样式，实现透明效果
var pngElement = document.createElement("div");
pngElement.style.width = img.width + 'px';
pngElement.style.height = img.height + 'px';
pngElement.style.backgroundImage = 'url('+ pngimgurl +')';
pngElement.style.backgroundRepeat = 'no-repeat';
pngElement.style.position = 'relative';
pngElement.style.display = 'inline-block';

img.onload = function () {
    pngElement.style.filter = "progid:DXImageTransform.Microsoft.AlphaimageLoader(src='"+ pngimgurl +"',sizingMethod='scale')";       
};

parentElement.appendChild(pngElement);
    

使用以上方法可以帮助我们解决IE6下png图片兼容问题，为网站提供更好的用户体验。但是，在使用JavaScript兼容IE6的png图片时要注意，这种方法可能会影响网站的性能，所以我们需要合理地使用它。