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 behavior。

使用behavior，您可以链接到htc文件，例如此处找到的文件：http://www.twinhelix.com/css/iepngfix/

然后你必须添加像：

这样的CSS

behavior: url(iepngfix.htc)

Answer 2

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

在CSS中使用IE＆lt; 7不支持的选择器：

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

#transparent_png {
    /* additional properties here */
}

IE6忽略了html＆gt; body #transparent_png样式。然后，我们在一个单独的.css文件中使用丑陋的DXImageTransform过滤器来透明地显示IE6中的png。但是只有当ie版本小于7时才应该加载这个css：

html标题：

<!--[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');

}

不幸的是，此过滤器不支持repeat-x或repeat-y。但是通过这个门骇客，你可以为IE 6显示一个丑陋的抖动gif阴影而不是更好的png阴影:)。

但是，DXImageTransform过滤器还有一个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

以上所有内容都可以使用，特别是alpha图像加载程序是好的，如果您计划使用它并且希望将来依赖它，那么您最好使用其他技术。

我找到的最好的是：DD_belatedPNG.js

它可以起到树木的作用，非常容易使用。

我与其他人的问题是，当您想要使用出现在bg顶部的链接时会出现错误。他们不工作，没有进一步的黑客攻击。

Answer 4

可以找到针对IE6的非常好的png修复here

我用它并且可以保证它有效。

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

IE中png文件的透明度

4 个答案: