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

Question

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

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

好的，看起来你的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; 
}