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

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

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

看看小提琴。应该把你全部弄清楚。

小提琴。 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; 
}