Question

我想在整个页面/正文中填充渐变背景。这是我尝试过的。它可以工作，但滚动后它不会拉伸到页面的整个高度。

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

Answer 1

应用以下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;
}

Answer 2

添加这个

background-attachment: fixed;

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

Answer 3

试试这个

＆＃13;

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%;}

＆＃13;

<body>
here we go
</body>

＆＃13;

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

3 个答案: