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

Posted 2023-03-06

【中文标题】CSS重复背景图像但不重复线性渐变

【英文标题】：CSS repeat background-image but no-repeat for linear-gradient

【发布时间】：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 需要相互对齐。

【参考方案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;

【讨论】：

很有魅力！非常感谢。