Question

我在使用PNG8图像的IE中遇到问题，因为它在我的* .png阴影中出现了一个很脏的黑色边框。（IE7，IE8）

我正在使用alphatransparency，并且在我的小图像下基本上有阴影。除IE之外，所有浏览器都渲染得很好，将阴影渲染为黑色圆圈？

我需要图像“透明”，因为它出现在各种彩色背景之上等等？

有什么想法吗？

Answer 1

我被迫回应。我刚刚解决了这个问题。回顾一下，在IE7和IE 8中，链接中的透明PNG和GIF图像有时会在它们周围出现黑色边框或阴影。

您需要检查以确保这些图像上没有不透明度滤镜。我在100上有不透明度。我把它更改为

filter:0;

还要记住模糊链接文本，您需要为链接指定背景颜色，否则它将模糊不清。

死于IE !!

Answer 2

好的 - 解决了这个问题。好像我的JS正在分配

filter: alpha(opacity=100);

到图像，这是导致黑色标记出现的原因，因为我已经在PNG8编码中使图像变为透明。

Answer 3

我想对答案表示感谢，并补充一些内容。在我的具体实例中，我需要覆盖以下样式：

filter: alpha(opacity=50);

添加以下代码使我的不透明度正确，但添加了黑边的问题：

filter: alpha(opacity=100);

这是通过解决问题救了我的一句话：

filter: 0;

我希望这也有助于其他人！

Answer 4

我在ie7中遇到了类似的不透明问题，ie8你可以做的是给你的png图像一个background color，这将从图像中删除丑陋的边框....它对我有用

Answer 5

这对我有动画效果：

img{
    background: transparent; 
    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); 
    zoom: 1;
}

Answer 6

在寻找替代解决方案后，我回到了源图像中寻找答案。

似乎24位.png文件会导致问题，但8位版本表现良好。我没有深入研究过这个问题。

这些设置在Photoshop的Save for Web＆amp; Devices -dialog帮我摆脱了不透明动画中的黑色笔画：

PNG-8，选择性，扩散，透明度，颜色：256，无光泽：无，无透明度抖动，隔行扫描并转换为带有“Internet标准RGB”的sRGB。

Answer 7

你可以使用IE的专有过滤系统在CSS购买中完成。

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');

<强> DEMO

您需要在背景声明中使用blank.gif作为“第一个”图像。这只是为了混淆ie8并防止它同时使用过滤器和你设置的背景，并且只使用过滤器。其他浏览器支持多个背景图像，并且会理解背景声明而不理解过滤器，因此仅使用背景。

您可能还需要在过滤器中使用sizingMethod，以使其按您希望的方式工作。

Answer 8

我对具有透明度的PNG发生了同样的事情，该PNG被设置为＆lt; A＆gt;的背景图像。应用了不透明度的元素。

修复方法是设置＆lt; A＆gt;的背景颜色。元件。

所以，以下内容：

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

变成：

/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF; 

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

IE中的PNG8黑色边框

8 个答案: