时间戳

首页 > 解决方案 > 带有修改后 alpha 的渐变不会填满整个页面

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

问题描述

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

图片已链接，因为我没有足够高的代表

在尝试了多种解决方案后，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 修改覆盖整个页面？

标签： htmlcsslinear-gradients

解决方案

我不认为这是 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;
}

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

推荐阅读