我有一个很酷的噪声叠加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;
}

最佳答案

您可以用逗号分隔每个背景的背景属性

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

10-05 20:56
查看更多