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中图像的边缘非常块状和锯齿状而不是光滑的线条，并且看起来不是抗锯齿的。有谁知道解决这个问题？它是在chrome中完成的，直到我通过应用-webkit-backface-visibility：hidden;来应用修复程序。这对于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）强制高度和宽度，则抗锯齿对大图像不起作用。我做了一些（非常）近似测试，并且我在1000px下推断了抗锯齿效果。

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

Answer 2

为了解决这个问题，我使用的盒子阴影似乎有效并使边缘光滑

Answer 3

@ geoffs3310，我感到很痛苦。

我发现这仍然是IE11和其他一些浏览器的问题（iPad和Chrome上的Safari以及三星Galaxy Tab A上的默认浏览器）。为了解决这个问题，我在包含背景图像的元素上进行了深色背景色调。我不知道为什么，但它似乎可以解决问题，例如。

background-color: black;

如果有其他人阅读这篇文章，请允许我提出一些其他修复，我在处理因倾斜内容而产生的各种问题时发现。请注意，这些都应用于已转换的容器元素。

消除了应用倾斜旋转后的jagginess按钮（kudos）：

transform-style: preserve-3d;

消除使用<canvas>的模糊情况（kudos to Zoltan）。注意，如果元素上有其他变换，则在单独的行上声明它们而不是速记（从内存中解决类似的Safari问题）：

transform: perspective(0);

另一个修复 - 虽然我的文档缺少它修复的内容，但我认为它与IE中的janky或模糊内容有关 - 尝试：

outline: 1px solid transparent;

Internet Explorer没有抗锯齿旋转图像

3 个答案: