我有一个问题,即将CSS动画添加到PNG图像会导致图像渲染质量大幅降低.

我有一个包含三个单独的PNG的div,当为任何图像添加动画时,所有图像的质量都会降低.

动画包含变换旋转,但仅将其添加到图像(动画关键帧之外)不会导致质量下降.我还试图删除应用于图像的父元素的所有其他变换,并删除其他属性,如透视,这没有帮助.只有在添加动画时才会降低质量.

我在Chrome中看到了这一点,图像呈现的方式与图像渲染时的外观完全相同：添加了-webkit-optimize-contrast.

有没有其他人遇到类似的问题？

最佳答案 我注意到,当图像依赖于浏览器来缩小图像尺寸时,这可能是Chrome的一个问题. Chrome不是一个图像处理程序,并且在实现转换时似乎更倾向于渲染质量.在不需要显着调整大小的图像上尝试相同的动画,看看是否有帮助.