HTML/CSS - 線性漸變不占用全屏

Question

如果我的身體有以下 CSS 屬性：

body {

 background-color: red;
 background-image: linear-gradient(red, orange);
}

然后漸變出現在我的網頁上，但它不占用全屏尺寸（我有一個大顯示器）。 如下所示： 這是頁腳的問題嗎？ 我目前沒有頁腳。

Answer 1

遇到同樣的問題，但只有這個工作，請將此樣式添加到您的 css

background-attachment: fixed;

background-attachment屬性設置背景圖像是與頁面的其余部分一起滾動還是固定的。 共有三個值： scroll 、 fixed和local 。 最適合漸變背景。

在 這里查看文檔

Answer 2

試試這個DEMO

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

body {
  background: rgba(231,56,39,1);
  background: -moz-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(231,56,39,1)), color-stop(27%, rgba(231,56,39,1)), color-stop(100%, rgba(255,166,0,1)));
  background: -webkit-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
  background: -o-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
  background: -ms-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
  background: linear-gradient(to bottom, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);

}

Answer 3

答案實際上是保證金屬性。

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
}