使用滤镜解决IE6下png图片不能透明(被渲染成默认

IE6何时才能真正成为过去？这是一个长久以来困扰着开发者的难题。尽管IE8已经推出多年，但在操作系统XP上，绑定的浏览器仍然是IE6。作为微软使用时间最长的系统，XP在中国的影响力无疑是极其巨大的。尽管IE6存在各种已知的bug，以及出现了许多更好用的浏览器，但并非所有用户都善于更新，也并非所有的机器都能轻松连上网，这使得升级成为一个巨大的挑战。特别是在国家机关、行业和国有企业的内网用户中，IE6的存在率依然高达90%以上，这个数据并不夸张。

在为这些用户开发项目时，我们必须时刻考虑到IE6的兼容性。尽管我并不擅长CSS，但多次被这个问题困扰后，我还是积累了一些经验。新问题总是层出不穷。最近，我遇到了一个关于图片透明度的老问题。

让我们来了解一下png和jpg两种图片格式的区别。png是美工钟爱的图片格式，因为它压缩率小、支持透明，而且图片大小对网络资源的占用率也较小。相比之下，jpg不支持透明，通常较大，更多用于图片存储、照片和素材收集，但不太适合大规模网络传输。

美工为了将图片制作成圆角，常常会将图片的某些角落设为透明。在IE7和IE8中，这样的设计毫无问题。但在IE6中，问题出现了。由于IE6不支持透明，所有的透明部分都会被渲染成灰色或白色（颜色取决于IE6的默认设置）。这不仅让设计看起来难看，而且圆角的效果也荡然无存。这是IE6的一个众所周知的问题，但我们必须找到解决办法。

经过在网上查找资料，我发现使用滤镜方式可以解决这一问题。在CSS中，无论之前使用的是标签还是background:url，都可以采用以下方式进行修改：

```css

height: 65px;

width: 198px;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='scale', src="scheme/homepage/images/xzzf_out.png");

background: none;

```

在以上CSS代码中，src表示图片的路径，height和width指定图片的宽和高，这里不要有任何变动，否则图片会被拉大或压缩。background:none这一点非常重要，注意这段CSS代码不要与其他CSS规则冲突。

这样，IE6上的问题就解决了。我已经在IE7上测试过没有问题，IE8应该也可以。有兴趣的朋友可以多试试，确保项目的兼容性和稳定性。