背景混合模式問題與固定的背景附件

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