html - 边缘的 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>

更新

整个问题实际上是看到元素边缘的背景颜色，就像这里 Fiddle link您可以通过在智能手机上打开链接并尝试放大来重现它。背景颜色来自边缘。

Kosh Very 的解决方案解决了这个问题

Demo on fiddle

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>

问题的另一部分是用 https://jsfiddle.net/5maqwgjg/2/ 解决类似的问题在 SGS7 默认浏览器(又名 Samsung Internet)中。添加 background-clip:content-box; 即可解决； transform:scale(1.01); 到 .middle ( https://jsfiddle.net/aw53wcg4/1/ )