6

我有一个带有我正在旋转的背景图像的 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 中，图像的边缘非常块状和锯齿状，而不是平滑的线条，并且似乎没有抗锯齿。有谁知道解决这个问题？在我通过应用 -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>
4

3 回答 3

3

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

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

于 2013-12-04T11:28:46.330 回答
2

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

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

background-color: black;

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

消除应用倾斜旋转后出现的锯齿按钮（赞）：

transform-style: preserve-3d;

消除<canvas>使用过的模糊部分（对 Zoltan 表示敬意）。请注意，如果元素上有其他转换，请在单独的行中声明它们而不是简写（从内存中这是为了解决类似的 Safari 问题）：

transform: perspective(0);

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

outline: 1px solid transparent;
于 2016-02-28T21:49:59.780 回答
1

为了解决这个问题，我使用了似乎可以工作并使边缘平滑的盒子阴影

于 2013-05-23T10:13:19.860 回答