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