png文件在IE中的透明度

Question

我在 css 中将其设置为背景图像比内容部分稍大，以便在其后面有一个在 y 方向重复的阴影，但在 IE 中它不显示透明度。我曾使用谷歌尝试解决这个问题，但没有成功地用CSS完成图像。

CSS：

#shadow{
width:854;
margin-left:auto;
margin-right:auto;
text-align:left;
background-image:url(shadow.png);
background-repeat:repeat-y;
}

HTML：

<div id="shadow">
</div> 

非常感谢任何帮助，因为我对此完全不知所措。

Answer 1

如果可能的话，你把 png 做成 gif，大家都很高兴。

如果这是不可能的，我使用的方法是仅 IE 的 css 行为。

通过行为，您可以链接到 htc 文件，如此处找到的文件：http://www.twinhelix.com/css/iepngfix/

然后，您必须添加 CSS，例如：

behavior: url(iepngfix.htc)

Answer 2

IE7支持png透明。
如果您想支持 IE6，您可以使用浏览器门之类的东西（这是一个丑陋的黑客）。

在 CSS 中使用 IE<7 不支持的选择器：

html>body #transparent_png {
    background: url(gfx/transparent_png.png);
    background-repeat: no-repeat;
} 

#transparent_png {
    /* additional properties here */
}

IE6 会忽略 html>body #transparent_png 样式。然后，我们在单独的 .css 文件中使用丑陋的 DXImageTransform-filter 来在 IE6 中透明地显示 png。
但只有当 ie 版本低于 7 时才应加载此 css：

html header:

<!--[if lt IE 7]>
    <style type="text/css" media="screen, projection">
    @import "iefixes.css";  
    </style>
<![endif]-->

iefixes.css 包含类似以下内容：

#transparent_png {
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png');

}

不幸的是，此过滤器不支持重复 x 或重复 y。但通过这个gate hack，您可以为 IE 6 显示丑陋的抖动 gif 阴影，而不是更好的 png 阴影:)。

但是，DXImageTransform-filter 也有一个 sizingMethod 属性（请参阅 http://msdn.microsoft.com/en-us/library/ms532920%28VS.85%29.aspx)，因此您可以将图像缩放到其容器元素的大小：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='gfx/transparent_png.png',sizingMethod='scale');

Answer 3

可以在这里找到针对 IE6 的非常好的 png 修复，

我使用了它并且可以向你保证它可以工作。

虽然是JS，但最近大多数人都打开了它

Answer 4

以上所有方法都可能有效，尤其是 alpha 图像加载器，它很好，但如果您打算使用它并希望将来依赖它，那么您最好使用另一种技术。

我发现的最好的是：DD_belatedPNG.js

它像树一样工作并且非常易于使用。

我与其他人遇到的问题是，当您想使用出现在背景顶部的链接时，会出现错误。如果没有进一步的破解，它们就无法工作。