html - 为什么线性渐变只应用于页面的 1% (CSS)？

Question

当我尝试使用 css 中的 html 标记将线性渐变应用于 html 中的页面时，结果是许多紧 strip ，每个 strip 都有自己的渐变。

html

    {
    background-image:linear-gradient(to top, black, white);
    }

但是当我将高度指定为 100% 时，它被应用于空洞页面:

html
{background-image:linear-gradient(to top, black, white);
height:100%;
}

当我将高度指定为 1% 时，结果是具有相同高度的相同 strip 。

我很困惑，我不知道这背后的原因，也不知道为什么默认情况下它只应用于 1%，尽管我使用了 html 标签(根标签)？

Answer 1

不要使用background-image，只使用background，并添加background-attachment。

如果您在滚动时使用 background-image 并为 html 设置 height:100%，您将失去渐变。

试试这个(只有 background 而没有 height):

html
{
    background:linear-gradient(to top, black, white);
    background-attachment:fixed;
}