Question

我的（简化）html和css看起来像这样：

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
 
 *{margin:0;padding:0;}/*added as requested*/
.background-image {
  background-image: url("http://wallpapercave.com/wp/UoQbFHi.jpg");
  background-position: 0px 0px;
  left: 0;
  bottom:0; /*added as requested*/
  right:0;
  top:0; /*added as requested*/
  position: fixed;
  z-index: 1;
  animation: animatedBackground 10s linear infinite;
  background-size: cover;
  height: 160%;
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

<div class="background-image"></div>

显然

webkit-filter: blur(5px);
  filter: blur(5px);

在这里不起作用？无论如何，我的问题是，在我正在使用的浏览器上，这给出了一个奇怪的间距（由于某种原因）

编辑：仍然不起作用顶部的空间仍然存在，结果：

Answer 1

请尝试以下操作：

设置body as margin:0;padding:0

和.background-image as top:0;left:0;right:0;bottom:0

将webkit-filter更改为-webkit-filter

＆＃13;

body{
  margin:0;
  padding:0;
 }
@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
.background-image {
  background-image: url("http://wallpapercave.com/wp/UoQbFHi.jpg");
  background-position: 0px 0px;
  left: 0;
  bottom:0;
  right:0;
  top:0;
  position: fixed;
  z-index: 1;
  animation: animatedBackground 10s linear infinite;
  background-size: cover;
  height: 160%;
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

＆＃13;

<body>
  <div class="background-image"></div>
</body>

＆＃13;

Answer 2

在大多数浏览器中，浏览器附带的user-agent-stylesheet中都有默认的边距和填充。

除了一些浏览器外，并非所有浏览器都允许您自定义该css文件，但在网页中明确添加body元素的css总是很容易，如

body {
  margin: 0px;
 padding: 0px;
       .....
     }

Answer 3

Body部分将调用内部分区，因此请确保Body Marins，如果我们设置body margin:0px，那么它将触及浏览器的顶部。

在CSS代码中尝试此代码，

body{
    padding: 0px;
    margin: 0px;
}

图片无法填满整页

3 个答案: