背景颜色整页

Question

我当前的代码似乎是在做一个模式，而不是覆盖整个页面。如何使其覆盖整个页面，而不是像描述那样的图案？

<style>
  body {
    background: linear-gradient(120deg, #211B53, #ECE3E6);
    width: 100%;
    height: 100%;
  }
  
  #para1 {
    text-align: center;
    font-size: 600%;
    color: black;
  }
  
  div.absolute {
    position: absolute;
    bottom: 10px;
    left: 10px;
  }
</style>

<p id="para1"> ARTWORK</p>
<div class="absolute"> All sales final. </div>

Answer 1

使用渐变时，请确保使用正确的CSS

 body {
    background: linear-gradient(120deg, #211B53, #ECE3E6);
    width: 100%;
    min-height:100vh;
    background-size: cover; 
  }
  
  #para1 {
    text-align: center;
    font-size: 600%;
    color: black;
  }
  
  div.absolute {
    position: absolute;
    bottom: 10px;
    left: 10px;
  }

<p id="para1"> ARTWORK</p>
<div class="absolute"> All sales final. </div>

你很好走！！

Answer 2

与其将width和height分别设置为100%，而不是将它们分别设置为100vw和100vh：

body {
  background: linear-gradient(120deg, #211B53, #ECE3E6);
  width: 100vw;
  height: 100vh;
}

#para1 {
  text-align: center;
  font-size: 600%;
  color: black;
}

div.absolute {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

<p id="para1"> ARTWORK</p>
<div class="absolute"> All sales final. </div>

Answer 3

我认为您要做的就是将身体的高度值从百分比更改为视口高度。

height: 100vh;

您可以了解有关视口单位here

的更多信息

Answer 4

尝试添加：

body { 
background-size: cover; 
   }