PNG在IE6下透明的css解决方案

最新推荐文章于 2025-05-09 16:22:52 发布

转载最新推荐文章于 2025-05-09 16:22:52 发布 · 467 阅读

divcss 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何解决IE6浏览器下PNG-24图片作为背景时出现的透明问题，并提供了具体的CSS滤镜代码示例，同时指出了使用这种方法可能遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于网页中的背景图片总是很头疼，很多网页中的图片有透明效果，咱们用gif图片就可以，但是有些半透明的图片，gif就不行了，而且毛边很严重，所以要用png格式的图片来拯救网页；
    ie6，咱就不说他万恶了，他不支持png图片，咱就想办法让他支持；
    ie自带的滤镜效果很强大，虽然说有性能影响，但也不能不用啊，总不能去学别人弄段js吧(虽然不知道哪种更浪费);

    .classA{ background:url(big.png) no-repeat center center; _background-image:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='image', src="http://shuiwangliu.blog.163.com/blog/big.png");
    }
enabled  : 　可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
          true | false true  : 　默认值。滤镜激活。   false  :　滤镜被禁止。
sizingMethod  : 　可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
         crop  : 　剪切图片以适应对象尺寸。
         image  :　默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
         scale  : 　缩放图片以适应对象的尺寸边界。
src  :　必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

上面代码中 _background-image:none; 专门为ie6设置，包括后面的 _filter：等利用hack使ie6不会实现

background:url(big.png) no-repeat center center; 所以也就有弊端了，background-position在ie6中不可以设置吧(我觉得是)

ie6并不是不支持png，它支持索引颜色的PNG-8，而是不支持RGB颜色的PNG-24。

ie6里的PNG-24图片做背景主要有以下几个问题：

一、ie6里png背景透明问题：解决办法用滤镜。这个一般高手们都知道。

注意：src 这个路径是指加载滤镜的页面相对于图片的路径，而不是css文件相对于图片的路径。这跟一般的图片加载有区别。