CSS重复背景图像但不重复线性渐变答案

【问题标题】：CSS repeat background-image but no-repeat for linear-gradientCSS重复背景图像但不重复线性渐变
【发布时间】：2014-06-09 14:41:14
【问题描述】：

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

【问题讨论】：

html, body {min-height: 100%} 有帮助吗？
不错的主意，但在这种情况下，页脚内容和 bg-gradient 需要相互对齐。

标签： css background-image overlay repeat linear-gradients

【解决方案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;
}

【讨论】：

很有魅力！非常感谢。