动画PNG图像不流畅，在IE中得到黑色背景

Posted 2023-05-08

【中文标题】动画PNG图像不流畅，在IE中得到黑色背景

【英文标题】：Animating PNG images are not smooth and got black background in IE

【发布时间】：2012-02-25 01:30:00

【问题描述】：

我正在处理的网站上的某些元素有问题，我似乎无法让它工作。

我为这个问题做了一个小演示： http://www.fersh.nl/pinpoint-animation/

我有两个问题：

在 IE 中我无法使图像透明，我尝试了一些解决方案但它不起作用，我尝试了这个解决方案：http://www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/ 但它仍然是黑色背景。而且我需要它是透明的，因为它会在超过 1 种颜色的图像上进行动画处理。

而且动画不是那么流畅，我使用 left 和 top 来保持图像居中，而且图像的质量在动画时会变得不稳定。

我希望有人可以帮助我解决这两个问题，我现在被这个问题困扰了一段时间，找不到正确的答案。

【参考方案1】：

IE 通常不能很好地处理 PNG。您可以尝试在元素上使用zoom:1，看看是否有帮助。您看到的黑色背景是 IE 专有过滤器的结果。

此外，您应该尝试将动画应用于父级而不是元素。因此，如果您必须将动画元素嵌套在另一个元素中，您应该这样做。例如，而不是使用：

<div id="gallery">
    <img src="/path/to/image/image1.png" />
    <img src="/path/to/image/image2.png" />
    <img src="/path/to/image/image3.png" />
    <img src="/path/to/image/image4.png" />
</div>

并将动画应用于图像，尝试使用：

<div id="gallery">
    <ul>
        <li><img src="/path/to/image/image1.png" /></li>
        <li><img src="/path/to/image/image2.png" /></li>
        <li><img src="/path/to/image/image3.png" /></li>
        <li><img src="/path/to/image/image4.png" /></li>
    </ul>
</div>

并将过渡应用到li 元素。

另外，如果您不反对使用 JQuery，请尝试使用这个插件 - http://jquery.andreaseberhard.de/pngFix/ 看看它是否有帮助。

【参考方案2】：

如果您还没有尝试过，希望这对您有所帮助。这是文件保存相关的支持，

您可以使用“另存为”命令将 RGB、索引颜色、灰度和位图模式图像保存为 PNG 格式。

注意：您还可以使用 Save For Web & Devices 命令将图像保存为一个或多个 PNG 文件。

选择文件 > 另存为，然后从格式菜单中选择 PNG。 选择隔行扫描选项： 点击确定。

无 仅当下载完成时在浏览器中显示图像。 隔行扫描 在文件下载时在浏览器中显示图像的低分辨率版本。隔行扫描使下载时间看起来更短，但也增加了文件大小。