html - 修复了背景附件的背景混合模式问题

Question

我的 css 文件中有以下样式，用于将我的 html 背景设置为柔和的渐变。但是有一个问题，如果内容的高度不是屏幕的 100%，渐变会被切断并重复。所以我添加了 background-attachment: fixed; 行，以便渐变填充页面。但是现在混合模式不起作用。早些时候，由于 background-blend-mode: screen;，我有一个舒缓的浅色组合，但现在颜色更亮了。我怎样才能解决这个问题？我使用的是最新版本的 mozilla firefox。

body {
    background:
        linear-gradient(
            cyan,
            transparent
        ),
        linear-gradient(
            -45deg,
            magenta,
            transparent
        ),
        linear-gradient(
            45deg,
            orange,
            transparent
        );
    background-blend-mode: screen;
    background-attachment: fixed; //added later to fill the background
}

Here is the jsfiddle link.

预期输出

我得到了什么

Answer 1

这样你的问题就解决了

html{
    width:100%;
    height:100%;
}
body {
    background:
        linear-gradient(
            cyan,
            rgba(255,255,255,0) 
        ),
        linear-gradient(
            -45deg,
            magenta,
            rgba(255,255,255,0) 
        ),
        linear-gradient(
            45deg,
            orange,
            rgba(255,255,255,0) 
        );
    background-blend-mode: screen;
}