【问题标题】: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;
    }
    

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

    【讨论】:

      猜你喜欢
      • 2020-05-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-04-12
      • 2019-09-22
      • 1970-01-01
      • 2018-05-06
      • 2021-08-08
      相关资源
      最近更新 更多