圖像的背景顏色有時顯示在容器外部

我想顯示一些動態調整顏色的圖形。爲此，我準備了所有形狀作爲圖像，其中形狀內部的區域具有透明度，而外部則爲白色。要更改形狀的顏色，我只需設置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

圖像的背景顏色有時顯示在容器外部

回答

相關問題