边缘的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 默认浏览器（又名三星 Internet）中使用https://jsfiddle.net/5maqwgjg/2/解决类似问题。添加background-clip:content-box; transform:scale(1.01);到.middle（https://jsfiddle.net/aw53wcg4/1/）可以解决