当浏览器重新调整背景图片大小时，图片下方出现 1px 故障

Question

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

我尝试了多张图片，我认为可以在Chrome和Safari中看到。 Chrome 中的 this jsfiddle 绝对可以复制故障（您需要重新缩放浏览器 window 并且它需要非常大才能看到）。

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>

Answer 2

我刚遇到这个问题，在网上几乎找不到，然后找到了这个 post。

我发现 this post 来自 2009(!) 作者建议使用：

  .hero {
        background-position: 49.999% 0;
    }

或

  .hero {
        background-position: 50.001% 0;
    }

在我的情况下，他们为我取得了不同程度的成功。我最终主要使用：

  .hero {
        background-position:bottom -1px left 0;
    }

由于我的设计允许我将尺寸减小 -1 像素，因此解决了这个问题。

当浏览器重新调整背景图片大小时，图片下方出现 1px 故障

1px glitch appearing below image when browser re-sizes background image

html

css

browser

image

background-image