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