当浏览器重新调整背景图像大小时，1px毛刺出现在图像下方

Question

这有点奇怪，可能是浏览器故障或图像在Photoshop中保存时出现问题，但我想我还是会问。当重新调整设置为background-size: cover;的背景图像时，奇数1px线似乎出现在图像的底部。它在网站上变得非常明显，因为背景颜色是黑色的。它不是一种颜色，让我想知道它是否是浏览器故障，见下文：

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

Answer 1

我认为这是background-position: bottom和background-size: cover之间的问题。我注意到，如果我们删除background-position: bottom，则没有任何故障。可能是Webkit浏览器的一个问题，即使我还没有找到错误报告。

您可以使用background-position: 50% 99%解决此问题，直到修复错误为止。如果有人有更好的答案，我有兴趣知道:)。

＆＃13;

＆＃13;

body{
  background: #000;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我刚遇到这个问题，在网上几乎找不到它，并找到了这篇文章。

我从2009（！）发现here，作者建议使用：

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

或

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

在我的情况下，他们为我带来了不同的成功。我最终主要使用：

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

由于我的设计使我可以将尺寸减小-1px，因此解决了这个问题。