边缘的CSS背景颜色

Question

我有一个透明的.png图像，我用css更改了背景颜色，所以我可以使用不同颜色的相同图像。

这是一个虚拟图像，问题出在Chrome浏览器上，当您放大某些点并在某些类似的智能手机上时，我会在该图像的顶部和底部找到一条线：

这取决于我认为的页面分辨率。 无论如何，这个问题都无法通过Firefox重现。

有没有人见过这样的东西？怎么解决这个问题？
以下是一个示例，尝试使用Chrome放大或使用智能手机打开它：

＆＃13;

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

更新

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

Kosh的解决方案解决了问题

Demo on fiddle

Answer 1

问题不是由图像本身引起的，而是由某些浏览器中的错误子像素渲染引起的。

以下代码可以解决Chrome 58.0.3029.110（64位）中的图像问题：

＆＃13;

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

问题的另一部分是在SGS7默认浏览器（又名三星互联网）中使用https://jsfiddle.net/5maqwgjg/2/解决类似问题。可以解决将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问题的引用，但接受的答案并不是一个完美的解决方案。阅读其他人以获取更多想法。 Remove white space below image