背景颜色整页[重复]答案

【问题标题】：background color full page [duplicate]背景颜色整页[重复]
【发布时间】：2019-06-24 04:29:38
【问题描述】：

我当前的代码似乎形成了一种模式，而不是覆盖整个页面。如何让它覆盖整个页面而不是像描绘一样的图案？

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

【问题讨论】：

而不是body height:100% set body min-height:100vh;
或者只为html设置100%的高度

标签： html css colors background

【解决方案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>

你可以走了！

【讨论】：

【解决方案2】：

不要在body上将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>

【讨论】：

【解决方案3】：

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

height: 100vh;

你可以阅读更多关于视口单元here

【讨论】：

【解决方案4】：

尝试添加：

body { 
background-size: cover; 
   }

【讨论】：

请在您的代码中提供一些解释，以便未来的用户可以更轻松地遵循您的想法/代码。 - From Review