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的解决方案解决了这个问题。

演示在fiddle上

- lewis4u

---

这是由于Chrome本身的计算不准确造成的。我认为你无法对此做任何事情。当你添加白色边框时，会出现更多的线条。 - lumio

是的... 所以没有帮助吗？有没有其他方法可以使用单个图片并通过CSS更改其颜色呢？ - lewis4u

也许是黑色背景透过来了？如果是这样，您可以尝试将图像包装起来（例如在figure中），将背景颜色应用于该元素，然后应用overflow:hidden？不确定，只是随便想想。 - domsson

如果 overflow:hidden 无效：你有考虑过使用 SVG 剪切蒙版吗？ - lumio

Answer 1

问题的根源不在图片本身，而是因为一些浏览器中的错误次像素渲染。

以下代码可以解决在我的Chrome 58.0.3029.110 (64-bit)中图片的问题：

.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/）。

- Kosh

Answer 2

图片自动具有vertical-align: middle，这会在边缘创建间隙。

您可以使用display: block将图像设置为块元素以删除空格。它们默认为inline-block。

如果您不希望图像成为块元素，请使用CSS向图像元素添加vertical-align: top或vertical-align: bottom。

这里是另一个SO问题的参考，但被接受的答案并不是完美的解决方案。阅读其他内容以获取更多想法。 删除图像下方的空白处

- Jacob Birkett

---

无法工作，请使用您的智能手机检查此示例：https://jsfiddle.net/5maqwgjg/2/ CSS 中的背景颜色在边缘上可见。 - lewis4u

它对我来说有效，你使用的是什么浏览器和Android版本？ - Jacob Birkett

SGS7 默认浏览器...但用户 Kosh Very 已经解决了它...诀窍是将图像缩放以覆盖边缘，这样背景颜色就无法显示出来。 - lewis4u