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

试试这个演示

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

}