html - 浏览器调整背景图片大小时图片下方出现 1px 故障

Question

这有点奇怪，可能是浏览器故障或图像在 Photoshop 中保存时出现问题，但我想我还是要问一下。调整设置为 background-size: cover; 的背景图片大小时，图片底部似乎出现了一条奇怪的 1px 线。由于背景颜色为黑色，因此在网站上变得非常引人注目。不是一种颜色让我怀疑它是否是浏览器故障，见下文:

我尝试了多张图片，我认为它可以在 Chrome 和 Safari 中看到。故障肯定可以在 this jsfiddle 上复制在 Chrome 中(您需要重新缩放浏览器窗口并且它需要非常大才能看到)。

Answer 1

我认为这是 background-position: bottom 和 background-size: cover 之间的问题。我注意到如果我们删除 background-position: bottom 就不会出现故障。可能是 Webkit 浏览器的问题，尽管我还没有找到这方面的错误报告。

您可以通过使用 background-position: 50% 99% 来解决这个问题，直到错误被修复。如果有人有更好的答案，我会很想知道:)。

body{
  background: #000;
}

.hero{
  background-image: url('http://i.imgur.com/R7WAday.jpg');
  height: 250px;
  width: 100%;
  background-size: cover;
  background-position: 50% 99%;
}

<div class="hero">
</div>