即使在较大的显示器上将宽度设置为100％，图像也不会填充宽度

Question

我的CSS中有这个：

.cover .cover-image {
  z-index: -1;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-size:100%;
  background-size: cover;
  background-position: center;
}

我的HTML中也有这个：

<div class="cover-image" style="background-image : url('./bkg.jpg');">

bkg.jpg是1939x1131的图像 - 比我的任何显示器都大。在我最小的（1280x1024）显示器上，它显示正常：

在我的中型（1440x900）和大型（1920x1080）显示器上 - 两者都小于图像 - 它在图像和滚动条之间显示一点白色：

为什么要显示，我该如何解决？

Answer 1

检查图像来源

https://chipperyman.com/dota/bkg.jpg

您的图片上有一个白条。

Answer 2

加倍背景大小你的代码，请修正背景大小：100％，否则你会遇到问题..我的意思是你不需要使用背景大小，因为你的图像已经比你的屏幕大了..

你需要规范化html，body

html, body {
padding: 0;
margin: 0;
}

Answer 3

那里。

基本上你在这里有一个绝对的定位错误。只需将< left：0px; '添加到 .cover .cover-image 选择器中，如下所示：

.cover .cover-image {
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0px;
  width: 100%;
  height: 100%;
  background-size:100%; /* old browser fallback, but I'd delete it */
  background-size: cover; /* duplicate of background-size */
  background-position: center;
}

这也是修复它的一个例子：http://jsfiddle.net/webyourway/868L6hhg/