CSS重複背景圖像但不重複線性漸變

Question

我有一個很酷的噪聲重疊PNG，我想在我的網站上使用。 但是，背景圖像是線性漸變。 如果我允許背景重複，它會正確覆蓋PNG，但是如果頁面內容比屏幕尺寸短，它也會重複漸變，這看起來很可怕。

有沒有辦法我可以用CSS重複PNG疊加，但是不是的線性漸變？

BODY { 
background-color:#dedede; 
background-image: url(icons/noise_overlay.png) 
       , linear-gradient(
         #c0bbbb 
        , #efefef 25em 
        , #efefef calc(100% - 15em) 
        , #dedede 
       ); 
background-repeat:no-repeat; 
} 

Answer 1

您可以用逗號每個後臺

BODY { 
background-color:#dedede; 
background-image: url(icons/noise_overlay.png) 
       , linear-gradient(
         #c0bbbb 
        , #efefef 25em 
        , #efefef calc(100% - 15em) 
        , #dedede 
       ); 
background-repeat:repeat, no-repeat; 
}