图像没有填满整个页面

问题描述：

@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>

Aparently

不在这里工作了？不管怎样，我的问题是，我使用的浏览器，这给在上面一个奇怪的间距（出于某种原因）

编辑：还不行顶部的空间仍然存在，结果是：

尝试体{保证金：0} – sinisake

你有删除的默认保证金和身体和HTML的填充？ –

试一下''{margin：0; padding：0;}'或'body {margin：0; padding：0;}' –

答

尝试以下操作：

设置body as margin:0;padding:0

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

变化webkit-filter到-webkit-filter

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); 
 
}

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

但是，如果您取消注释“webkit-filter”部分，它会起作用吗？ – Safirah

@Safirah，试试：-webkit-filter：... note'-'... – sinisake

我已经编辑帖子，请参阅 – Safirah

答

在大多数的浏览器，有在user-agent-stylesheet默认margin和padding自带的浏览器。

不是，但浏览器的所有部分允许您自定义的CSS文件，但它总是容易明确地添加你的CSS为主体元素在你的网页像

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

答

主体部分将调用内所以请确保身体边距，如果我们设置身体margin:0px那么这将触摸浏览器的顶部。

试试你的CSS代码中的代码，

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

图像没有填满整个页面

相关推荐