Question

当我在CSS中对身体应用线性渐变时，如下所示

body 
{
background: linear-gradient(#10416b, black); 
}

它并没有将它应用到整个网页，相反，它会应用于页面的前半部分，然后在下半部分从蓝色开始到黑色，（＃10416b是一个蓝色）。加高：100％;对身体没有任何改变。

我通过在CSS

中执行以下操作来解决问题

.background {
  background: linear-gradient(#10416b, black);
  height: 100%; 

}

，这在HTML

中

<!DOCTYPE html> 
<html class="background"> 
 // lots of unrelated code in between the tags  
</html>

但我仍然不明白为什么在身体中设置线性渐变的背景并不起作用。如果有人可以向我解释这将是伟大的。

Answer 1

使用100vh而不是100％

   body {
      height: 100vh;
      background: linear-gradient(#10416b, black); 
    }

body in和of本身没有高度，所以它看起来是它的父元素<html>，因为它没有内容，也没有高度。

vh使用视口尺寸而不是父元素的

Answer 2

如果HTML没有高度或正文包含内容，则正文没有它自己的高度。然后渐变将重复，因为repeat是background速记属性中的默认值。 / p>

html {
  height: 100%;
}
body {
  background: linear-gradient(#10416b, black);
}