我在IE浏览器中使用PNG8图片时出现问题，我的*.png文件的阴影处会出现一个大黑色脏边。(IE7, IE8)
我使用了透明通道，并且在我的小图像下面添加了阴影。所有的浏览器都可以正确显示这个效果，但是IE将这个阴影呈现为黑色圆圈？
我需要使图片具有“透明”属性，因为它会显示在各种多彩的背景上等等。
你有什么想法吗？
8个回答
5
我很乐意给予帮助。我刚刚也解决了这个问题。简单概括一下，在IE7和IE8中，链接中的透明PNG和GIF图像有时会出现黑色边框或阴影。
您需要检查这些图像上是否存在不透明度滤镜。我的不透明度为100。我将其更改为
filter:0;
对于模糊的链接文本，您需要指定链接的背景颜色，否则它会变得模糊不清。
IE应该消失!!
- Jason
3
好的 - 问题已解决。看起来我的JS正在分配
filter: alpha(opacity=100);
这个黑色标记的出现是因为我已经在PNG8编码中将图像设置为透明，但仍有一个元素没有设置为透明，导致了这个问题。
- Tom
3
我很感谢你的回答，并想补充一些内容。 在我的具体情况下，我需要覆盖一个样式，它是：
filter: alpha(opacity=50);
加入以下代码可以使我的不透明度正确，但会加入黑边问题：
filter: alpha(opacity=100);
这一行代码解决了我的问题：
filter: 0;
我也希望这篇内容能帮助其他人！
- Jamie
1
有人能解释一下为什么IE7会出现这种情况吗？修复方法似乎有效，这很好（谢谢！），但我想更深入地了解它，以防将来遇到无法使用filter:0的情况。（并且满足我的好奇心，总体而言。） - Jess Jacobs
1
使用动画不透明度，这个方法对我有用：
img{
background: transparent;
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
zoom: 1;
}
- TomTheMeatBomb
1
我曾经遇到过在ie7、ie8中使用透明度时出现的类似问题，解决方法是给你的png图片添加一个背景颜色，这样就可以去除图片周围的丑陋边框...这对我很有效。
- halocursed
1
嘿，谢谢 - 但是如果我需要透明的背景怎么办？也就是说，它会出现在我的网站上的其他图像之上，因此无法确定背景颜色是什么... - Tom
1
在寻找替代方案后，我回到源图像寻找答案。
似乎24位.png文件会引起问题，但8位版本表现良好。我还没有深入研究这个问题。
Photoshop的“保存为Web和设备”对话框中的以下设置帮助我摆脱了透明度动画中的黑色描边：
PNG-8、选择性、扩散、透明度、颜色：256、底板：无、无透明度抖动、交错和使用“Internet Standard RGB”转换为sRGB。
- Ismo Vuorinen
1
您可以使用IE的专有过滤系统，在CSS中完成此操作。
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');
在您的背景声明中，您需要使用一个空白的.gif作为“第一个”图像。这只是为了混淆ie8并防止它同时使用您设置的过滤器和背景，并且仅使用过滤器。其他浏览器支持多个背景图像，并且将理解背景声明而不理解过滤器，因此仅使用背景。
您还可能需要调整过滤器中的sizingMethod以使其按照您的意愿工作。
- Fresheyeball
0
我曾经遇到过同样的问题，当时我将一个带有透明度的PNG图片设置为<A>元素的背景图像。
解决方法是设置<A>元素的背景颜色。
因此，代码如下：
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: ...;
- Josh Mouch
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接