如何让渐变背景填满整个页面？

Question

如何让渐变背景填满整个页面？

3

我希望页面/主体能填充渐变背景。这是我尝试过的方法。它有效，但在滚动后无法延伸到页面的完整高度。

body {
    width: 100%;
    height: 100%;
    background: #034b52 url(../../themes/images/bg.jpg) no-repeat center fixed;
    color: #fff;
}

body:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, rgba(3, 75, 82, 1) 0%, rgba(3, 75, 82, 0) 100%);
    content: '';
    z-index: -1;
}

- Stack Over

使用CSS中的background-attachment: fixed;在body标签上应用背景，以创建固定渐变背景。 - abhirathore2006

3个回答

0

添加这个

background-attachment: fixed;

background-attachment 属性设置背景图像是随页面其余部分滚动还是固定的。有三个值：scroll、fixed 和 local。

- aswzen

-2

试试这个

body{
  background: url("https://upload.wikimedia.org/wikipedia/commons/f/f0/Googlelogo1997.jpg") no-repeat center center, linear-gradient(green, blue);
height:100%;
 
}
html{height:100%;}

<body>
here we go
</body>

- Vipin Raunchhela

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anuj · Accepted Answer

应用以下CSS：

body {
     background: linear-gradient(to bottom, rgba(3,75, 82, 1) 0%, rgba(3,75, 82, 0) 100%);
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}