Question

我想显示一些动态调整颜色的形状。为此，我准备了所有形状作为图像，在形状内部区域和外面的白色透明。要更改形状的颜色，我只需设置background-color元素的img属性。

问题在于我有时可能会在图像边缘看到1像素宽的线条。 Google Chrome浏览器中可以看到图片顶部的这条线，而在PC版本中，一旦页面放大，就可以看到此问题。这个问题在Firefox中不会发生。这是sample code in JSFiddle（已更新）。

更重要的是，如果删除外部div元素或其样式（我添加它，因为我希望页面在水平和垂直方向都居中），问题不会发生

我正在寻找任何解决方案：要么修复我的代码，要么采用其他方式来实现我动态着色形状的目标。

Answer 1

我在你的代码中看到的是那条线在外面溢出。您只需将overflow:hidden添加到div元素即可。请参阅此fiddle

<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);overflow:hidden;">
  <img src="http://s10.postimg.org/vipedk1qd/arrow_up.png" style="background-color: red;" />
</div>

Answer 2

这看起来像是GPU加速合成中的一个小故障。如果您不需要CSS中的transform属性，删除它应该可以解决您的问题（至少在OS X上的Chrome中我会这样做）。在这种情况下，您可以（例如）使用负边距

<div style="position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -27px">
    <img src="http://s10.postimg.org/vipedk1qd/arrow_up.png" style="background-color: #000000;"/>
</div>

http://jsfiddle.net/Lyd6xs5u/2/

Answer 3

最后，我设法找到了一个有效的解决方案：

backface-visibility: hidden;
-webkit-backface-visibility: hidden;

必须将其添加到主容器的样式中，该容器应用了transform属性。

请参阅此JSFiddle。

有时在容器外显示图像的背景颜色

3 个答案: