使用带有背景重复的 alpha png 时出现 IE10 伪影答案

【问题标题】：IE10 artifacts appear when using alpha png with background-repeat使用带有背景重复的 alpha png 时出现 IE10 伪影
【发布时间】：2013-10-07 09:28:47
【问题描述】：

我在Windows8下的IE10中遇到了如下问题，只是使用了带有repeat-x背景的简单div并且使用透明png时出现了伪影。

结果： http://s18.postimg.org/9tn3dlsqx/artifacts.png

这里是示例代码：

CSS

div.field { height: 762px; background-image: url(../img/background_grass.png) repeat-x; width: 5000px; left: -700px; position: absolute;  }
div.graphics { overflow: hidden; width: 3840px; position: absolute; background: url(../img/path_1.png); height: 640px; top: 315px; left: -1000px;}

还有html

<!DOCTYPE html>
<html>
<head>
    <title>MyForest - Идея по-чисто</title>
    <meta charset="UTF-8" />
    <link href="styles/styles.css" rel="stylesheet" />
</head>

<body>
    <div class="field"></div>
    <div class="graphics"></div>
</body>

【问题讨论】：

仅在 Windows 8 下的 IE 10 上？另外，你能做一个小提琴吗？

标签： html css internet-explorer png transparency

【解决方案1】：

我也有同样的问题。尝试更改图片的高度或宽度。

重复出现具有一定高宽比的大型 png 背景图像似乎会发生这种情况。在我的例子中，图像是 2000px 宽 x 1000px 高，背景的右侧最终重叠了 88 像素（背景最终是 2088 像素。在我的例子中，我使用的是带有稍微透明的环绕图形的透明 png。更奇怪的是，如果我将图像设置为 2000 像素乘以 2000 像素，问题就会消失。

太糟糕了...我希望 IE 在第 10 版中有所改进，我们就不必再处理这些怪癖了。

【讨论】：

谢谢你，我还认为问题出在图像上，通过调整在 Photoshop 中重复瓷砖的位置，似乎已经解决了问题。