圖像沒有填滿整個頁面

我（simplifed）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>

Aparently

不在這裏工作了？不管怎樣，我的問題是，我使用的瀏覽器，這給在上面一個奇怪的間距（出於某種原因）

編輯：還不行頂部的空間仍然存在，結果是：

來源

2016-12-29 Safirah

嘗試體{保證金：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>

來源

2016-12-29 13:04:01

但是，如果您取消註釋「webkit-filter」部分，它會起作用嗎？ – Safirah

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

我已經編輯帖子，請參閱 – Safirah

在大多數的瀏覽器，有在user-agent-stylesheet默認margin和padding自帶的瀏覽器。

不是，但瀏覽器的所有部分允許您自定義的CSS文件，但它總是容易明確地添加你的CSS爲主體元素在你的網頁像

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

來源

2016-12-29 13:05:02

主體部分將調用內所以請確保身體邊距，如果我們設置身體margin:0px那麼這將觸摸瀏覽器的頂部。

試試你的CSS代碼中的代碼，

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

來源

2016-12-29 13:09:46

圖像沒有填滿整個頁面

回答

相關問題