在CSS中的repeat-y上翻转背景图像

Question

我有一个渐变图像作为我网站的背景，但我在使它在所有页面尺寸下看起来都正确时遇到了问题。图像是 291x1080，我让它做一个重复-x。这适用于所有不大于 1080p 的页面。但是，对于内容较多的页面或分辨率大于 1080p 的屏幕，背景后面会出现一个空白。我不想做一个简单的repeat-y，因为没有过渡的从浅到深的渐变会很奇怪。有没有办法在每次使用 CSS 重复-y 时翻转背景图像？

Answer 1

这是执行此操作的 css：

body {
    ...
    background: #eeeeee url("/static/img/background.png") 0 0 repeat-x;
    ...
}

Answer 2

我的建议：有织物纹理和渐变，而不是在图像中。

例如：

body{
     background-image: url("/static/img/background.png") repeat, linear-gradient(top, #000000, #123456);
}

您应该确保添加浏览器支持标签（-webkit 等）

如需进一步参考，请查看以下内容： How do I combine a background-image and CSS3 gradient on the same element?