div的背景图像周围出现灰色线

Question

我有一个div，它是页面宽度和高度的100％。

我已将div的背景设置为动画gif，并使背景的高度随div的高度（页面高度的100％）而变化。背景图像水平重复，位于页面底部。

HTML / CSS

在Chrome中运行此代码段，将其设为全屏，然后调整窗口大小，直到显示该行。

html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}
.bottomAnim {
  border: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
  background-size: auto 65%;
  background-position: bottom;
  z-index: 1000;
}

<div class="bottomAnim"></div>

问题是背景图像顶部会出现灰色的水平细线。页面的背景颜色与图像顶部的颜色相同，因此我不知道该行的来源。当我将浏览器（谷歌浏览器）的高度设置得很短时，该线条就会消失。 Safari上不会出现此问题。

从上面的屏幕截图中可以看出，重复的背景图像位于底部。每个重复的图像之间没有垂直留置权，但是有一条水平线穿过它们。我已经检查了图像，并且该行不存在，它是由浏览器生成的。我如何摆脱这条线？我已经查看了其他帖子，但没有一个修复工作。

这是背景图片：

Answer 1

html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}
.bottomAnim {
  border: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
  background-size: auto;
  background-position: bottom;
  z-index: 1000;
}

<div class="bottomAnim"></div>

使用此

  background-size: auto;

而不是

  background-size: auto 65%;

Answer 2

@media解决方法

只有较大的视口高度才会出现此错误。幸运的是，在一定高度后缩小图像并不是很重要。考虑到这一点，我们可以使用@media查询仅在视口高度低于特定大小时应用background-size缩放：

@media (max-height: 700px) {
  .bottomAnim {
    background-size: auto 65%;
  }
}

工作示例

As a jsBin as well

html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}
.bottomAnim {
  border: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2851A6 url("http://i.stack.imgur.com/spmUM.gif") left repeat-x;
  background-position: bottom;
  z-index: 1000;
}
@media (max-height: 700px) {
  .bottomAnim {
    background-size: auto 65%;
  }
}

<div class="bottomAnim"></div>