固定背景附件的背景混合模式问题

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;
}

Answer 2

好吧，它看起来像是透明的＆＃39;你的CSS中的黑色透明。如果将其设置为白色透明，那么您将获得所需的外观。正如Vals所提到的，如果你再次遇到这个问题，黑色透明是未来参考的标准。

看看小提琴。应该把你全部排除在外。

小提琴。 http://jsfiddle.net/f90vwhw3/3/

要修复的CSS：

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;
        background-attachment: fixed; 
}