背景圖像無法覆蓋整個身體

Question

我有身體的背景圖片。

CSS：

* {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  font-family: DaxOT, Helvetica, Arial, sans-serif;
  background-image: url("background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-color:#f00;
  font-size: 16px;
}

該圖像不能覆蓋整個頁面。 （就像背景大小一樣：封面）身體的大小合適。 您會看到左側和右側的紅色區域。 效果發生在IE和Firefox中。

片段：

 <html> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; border: 0; } html { width: 100%; height: 100%; min-height:100%; min-width:100%; } body { min-height:100%; min-width:100%; font-family: DaxOT, Helvetica, Arial, sans-serif; background-image: url("https://picload.org/thumbnail/darlclgr/fond_blau-verlauf.jpg"); background-repeat: no-repeat; background-position: center; -webkit-background size: cover; -o-background-size: cover; -moz-background-size: cover; background-size: cover; background-attachment: fixed; background-color:#f00; } </style> </head> <body></body> </html>

Answer 1

嘗試增加高度

width: 100%;
height: 100%;

為此，您還需要在html和body中添加高度。 喜歡：

html, body{
min-height:100%;
min-width:100%;
}

如果這不起作用，則將其添加到正文中：

-webkit-background size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size:cover;

背景圖像無法覆蓋整個身體

問題描述

1 個解決方案

解決方案1
0 2018-02-16 12:28:00

背景圖像無法覆蓋整個身體

問題描述

1 個解決方案

解決方案1 0 2018-02-16 12:28:00

解決方案1
0 2018-02-16 12:28:00