Question

当我为HTML和CSS项目运行代码时，我有一个背景，该背景是在CSS类中设置的。该背景在HTML文件中构造。但这似乎无法覆盖我计算机的整个屏幕。当我尝试编辑height变量时，它不会改变背景的高度，这让我一无所知。

.gradient{
   width: 100wh;
   height: 90vh;
   color: #fff;
   background: radial-gradient(#EE7752, #CF22E7);
   background-size: 400% 400%;
   -webkit-animation: Gradient 10s ease infinite;
   -moz-animation: Gradient 10s ease infinite;
   animation: Gradient 10s ease infinite;
}

<div class="jumbotron text-center gradient">
    <div class="content">
        <p class="lead" style="color:#FFFFFF"></p>
    </div>
</div>

Answer 1

您可以添加一个background-size: 300px 100px, cover;

.gradient{
width: 100wh;
height: 90vh;
color: #fff;
background: radial-gradient(#EE7752, #CF22E7);
background-size: 300px 100px, cover !important;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite;
}

<div class="jumbotron text-center gradient">
    <div class="content">
        <p class="lead" style="color:#FFFFFF"></p>
    </div>
</div>

Answer 2

您可以在background-size:cover的css insted中添加background-size:400% 400%

Answer 3

to

.gradient{
width: 100wh;
height: 90vh;
color: #fff;
background: radial-gradient(#EE7752, #CF22E7);
background-size: cover;
-webkit-animation: Gradient 10s ease infinite;
-moz-animation: Gradient 10s ease infinite;
animation: Gradient 10s ease infinite;

}

Answer 4

如果您只想删除边缘周围的空白区域（例如，覆盖整个屏幕），这是由于div包含在body元素中，默认情况下，该元素有一个{{ 1}}由浏览器添加。

尝试一下：

margin

HTML CSS背景未覆盖页面

4 个答案: