邊緣的CSS背景顏色

Question

我有一個透明的.png圖像，我用css更改背景顏色，所以我可以使用不同顏色的相同圖像。

這是一個虛擬圖像，問題出在Chrome瀏覽器上，當你放大某些點並在某些類似的智能手機上時，我會在該圖像的頂部和底部找到一條線：

這取決於我認為的頁面分辨率。 Firefox無論如何都無法重現此問題。

有沒有人見過這樣的東西？ 怎么解決這個問題？
以下是一個示例，嘗試使用Chrome放大或使用智能手機打開它：

 .vertical-center { position: relative; top: 50%; transform: translateY(-50%); background-color: black; background-clip: padding-box; background-clip: content-box; } /* CSS used here will be applied after bootstrap.css */ .equal-col-height { display: flex; display: -webkit-flex; flex-wrap: wrap; } 

 <div class="panel-heading">Heading</div> <div class="panel-body"> <div class="row equal-col-height"> <div class="col-xs-6 text-center"> <img class="vertical-center" src="https://s21.postimg.org/6hym65mtj/test.png"> </div> </div> </div> 

更新

整個問題實際上是看到元素邊緣的背景顏色，就像這里小提琴鏈接你可以通過打開智能手機上的鏈接並嘗試放大來重現它。背景顏色來自邊緣。

Kosh的解決方案解決了這個問題

小提琴演示

Answer 1

問題不是由圖像本身引起的，而是由某些瀏覽器中的錯誤子像素渲染引起的。

以下代碼使用我的Chrome 58.0.3029.110（64位）中的圖像執行操作：

 .vertical-center { position: relative; top: 50%; transform: translate3d(-1px,-50%,0); background-color: black; background-clip: content-box; display: block; border: solid 0.1px transparent; } /* CSS used here will be applied after bootstrap.css */ .equal-col-height { display: flex; display: -webkit-flex; flex-wrap: wrap; } 

 <div class="panel-heading">Heading</div> <div class="panel-body"> <div class="row equal-col-height"> <div class="col-xs-6 text-center"> <img class="vertical-center" src="https://s21.postimg.org/6hym65mtj/test.png"> </div> </div> </div> 

問題的另一部分是在SGS7默認瀏覽器（又名三星互聯網）中使用https://jsfiddle.net/5maqwgjg/2/解決類似問題。 可以解決添加background-clip:content-box; transform:scale(1.01); background-clip:content-box; transform:scale(1.01); 到.middle （ https://jsfiddle.net/aw53wcg4/1/ ）

Answer 2

圖像自動具有vertical-align: middle並在邊緣上創建間隙。

您可以使用display: block將圖像作為塊元素來刪除空格。 它們默認為inline-block 。

如果您不希望圖像成為塊元素，請使用CSS將vertical-align: top或vertical-align: bottom到圖像元素。

這是對另一個SO問題的引用，但是接受的答案並不是一個完美的解決方案。 閱讀其他人以獲取更多想法。 刪除圖像下方的空白區域