HTML CSS背景未覆盖页面
HTML CSS背景未覆盖页面
提问于 2018-07-16 12:22:23
当我为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>回答 4
Stack Overflow用户
发布于 2018-07-16 12:38:55
你可以添加这个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>Stack Overflow用户
发布于 2018-07-16 12:27:24
你可以在你的css中添加background-size:cover而不是background-size:400% 400%。
Stack Overflow用户
发布于 2018-07-16 12:35:42
.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;
}<div class="jumbotron text-center gradient">
<div class="content">
<p class="lead" style="color:#FFFFFF"></p>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51354553
复制相关文章
相似问题
腾讯云开发者
