html - Internet Explorer 不抗锯齿旋转图像

Question

我有一个带有正在旋转的背景图像的 div。下面是我的 css 规则来旋转​​它:

#services_parallax { 
-webkit-transform:rotate(3.1deg); /* Webkit */
transform: rotate(3.1deg); /* firefox & IE9+ */
/* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
}

问题是在 IE 中，图像的边缘非常 block 状和锯齿状，而不是平滑的线条，而且看起来没有抗锯齿。有谁知道解决这个问题？在我通过应用 -webkit-backface-visibility: hidden; 对其进行修复之前，它是在 chrome 中进行的；这对 chrome 非常有效，我只需要对 IE 进行类似的修复(如果存在的话)。

要重现此问题，请将以下内容粘贴到 HTML 文件中并在 IE 中查看:

<style type="text/css"> 
#services_parallax { -webkit-transform:rotate(3.1deg); /* Webkit */ 
    transform: rotate(3.1deg); /* firefox & IE9+ */ 
    /* IE7 & 8 */ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.998537, M12=-0.054079, M21=0.054079, M22=0.998537, sizingMethod='auto expand'); 
    background: url(http://img.netcarshow.com/Pagani-Zonda_R_2009_1600x1200_wallpaper_01.jpg) center center; 
    background-size:100% auto; 
    height:100px; 
    width:700px; 
    margin-top:50px; 
    margin-left:50px; 
} 
</style> 
<div id="services_parallax"></div>

Answer 1

如果使用 CSS(IE11、10 和 9)强制设置高度和宽度，则抗锯齿​​功能对大图像不起作用。我做了一些(非常)近似的测试，我扣除了 1000 像素以下的抗锯齿工作。

我仍在寻找这个问题的官方来源。