带有修改后 alpha 的渐变不会填满整个页面答案

【问题标题】：Gradient with modified alpha doesn't fill whole page带有修改后 alpha 的渐变不会填满整个页面
【发布时间】：2021-08-13 18:33:56
【问题描述】：

我正在尝试创建一个填充整个页面的渐变 - 我已经设法让我的渐变填充整个页面，但是通过更改 alpha 变量使渐变变暗后，我注意到不一致 - 主要页面的一部分看起来不错，但是一旦我向下滚动，就会出现变暗问题 - 渐变的较暗区域不会扩散到页面的下部，如下所示：

Image is linked since I don't have high enough rep

在尝试了多种解决方案后，CSS代码确实是一团糟，但如下所示：

html {
    margin: 0px;
    height: 100%;
    width: 100%;
}
body {
    margin: 0px;
    min-height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background: rgb(54,174,0);
    background: linear-gradient(135deg, rgba(54,174,0,1) 0%, rgba(55,0,174,1) 100%);
}

如何确保 alpha 修改覆盖整个页面？

【问题讨论】：

标签： html css linear-gradients

【解决方案1】：

我不认为这是 alpha 修改的问题。

您在主background 属性上方编写了背景的子属性，底部background 属性将覆盖上述属性。主要是 background-attachment 是导致问题的原因。

css 应如下所示：

html {
            margin: 0px;
            height: 100%;
            width: 100%;
}
body {
            margin: 0px;
            min-height: 100%;
            width: 100%;
            /*background: rgb(54,174,0);*/
            /*background-repeat: no-repeat;*/
            /*background-size: cover;*/
            background: linear-gradient(135deg, rgba(54,174,0,1) 0%, rgba(55,0,174,1) 100%);
            background-attachment: fixed;
}

注释行是多余的，因为属性被覆盖或设置为默认值。

【讨论】：