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