互联网资源管理器不抗锯齿旋转图像

我有一个与我正在旋转的背景图像的股利。下面是我的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>

来源

2013-05-08 geoffs3310

请指定哪些IE版本有问题？ IE 7/8（使用'filter'）与IE 9/10（使用'transform'）的工作方式非常不同。 – Spudley 2013-05-08 11:45:53

我在所有版本中都有问题 – geoffs3310 2013-05-08 12:48:17

您是否也可以确认您使用的是每个IE版本的真实副本，或者您是否使用兼容模式来进行测试？（对于像这样的东西，这可能会对你看到的结果有影响） – Spudley 2013-05-08 12:49:58

为了避开这个问题，我用箱阴影这似乎工作，使流畅的

来源

2013-05-23 10:13:19 geoffs3310

边缘

如果使用CSS强制使用高度和宽度（IE11,10和9），则抗锯齿功能不适用于大图像。我做了一些（非常）近似的测试，并在1000px下扣除了抗锯齿工作。

我仍然在寻找这个问题的官方消息。

来源

2013-12-04 11:28:46 Fractaliste

@ geoffs3310，我感觉到你的痛苦。

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

background-color: black;

而且万一别人读这篇文章，请允许我提出一些其他的修正我在处理从歪斜的内容中出现的各种问题找到。请注意，这些全部应用于转换后的容器元素。

消除后倾斜旋转应用（kudos）的锯齿按钮获得：

transform-style: preserve-3d;

其中<canvas>已使用消除模糊（kudos to Zoltan）。请注意，如果有该元素上的其它变换宣布他们在不同的行，而不是简写（从内存中，这是解决类似的Safari浏览器的问题）：

transform: perspective(0);

而另一修复，虽然我的文档没有什么修复，我认为这是在IE浏览器尝试使用janky或模糊内容：

outline: 1px solid transparent;

来源

2016-02-28 21:49:59

互联网资源管理器不抗锯齿旋转图像

回答

相关问题