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

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