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

我想显示一些动态调整颜色的图形。为此，我准备了所有形状作为图像，其中形状内部的区域具有透明度，而外部则为白色。要更改形状的颜色，我只需设置img元素的background-color属性。图像的背景颜色有时显示在容器外部

问题是我可能有时在图像的边缘看到1像素宽的线条。图片顶部的这条线可以在适用于Android的谷歌浏览器中看到，而在PC版中，当页面放大时可以看到此问题。Firefox中不会出现该问题。这是sample code in JSFiddle（更新）。

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

我正在寻找任何解决方案：或者一些破解来修复我的代码或另一种方式来实现我的动态着色形状的目标。

来源

2015-02-24 maral

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

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

这已被添加到主容器的风格，它具有应用transform属性。不需要overflow: hidden;。

请参阅JSFiddle。

来源

2015-02-25 18:42:49 maral

这看起来像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/

来源

2015-02-24 14:28:41 CupawnTae

我可以在代码中看到的是，行外溢出。您只需将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>

来源

2015-02-24 14:30:26

这解决了在这种特殊情况下的问题，但是看看这里： http://jsfiddle.net/Lyd6xs5u/7/ 随着'溢出：隐藏;'一旦你缩放页面的线是可见的。我相应地更新了问题中的链接。 – maral 2015-02-24 15:04:33

是的..这是真的.. cupawn提供的另一种解决方案也遭受同样的问题..一个更好的解决方案是必需的.. – 2015-02-24 18:32:41

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

回答

相关问题