Div 重复背景在 IE/Edge 中无法正确呈现

Question

我有这个 div :

<div id="trees"></div>

格式化为 css:

#trees {
  width: 100%;
  position: absolute;
  top: 37%;
  height: 40%;
  background: url("/img/Tree.png") repeat-x;
  background-size: auto 100%;
}

它在我测试的所有浏览器中都运行良好，结果如下：

除了 IE/Edge，它看起来像这样：

有颜色错误的树：

最奇怪的是，这个问题不会影响任何其他具有类似配置背景图像（如火车轨道或山脉）的 divs...我对此进行了很多搜索，但似乎无法解决随时随地寻找答案。我还尝试将图像从 png 转换为 gif，结果相同。我将如何解决此问题以获得 IE/Edge 兼容性？

这是在 Edge 中重现问题的代码笔：https://codepen.io/darthmooguy/pen/gmNWwg

Answer 1

这是从 Irfanview 保存的树图像 (png)（透明保存，无压缩）...不过我不确定 Irfanview 是否剥离了 Adobe 元数据。

如您所见...颜色和透明度颜色与 adobe 创作的来源完全不同。

Answer 2

我和你遇到了同样的问题，虽然这不能解决问题的原因，但我发现在图像的边缘添加透明填充并增加背景大小是一个可用的解决方法在许多情况下。

https://codepen.io/anon/pen/BRwxbR 添加以下缩放我的背景，因此将其设置为适当的级别。

background-size: auto 250%;
background-position: center center;

请忽略颜色变化 - 我也想知道是否根据您最初的问题特定颜色触发了它，但它没有。

我可能会进一步研究这个问题，因为我这里的解决方法实际上并没有解决我的问题。 :)

Div with repeated background does not render proprely in IE/Edge