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

Question

我有一个渐变图像作为我的网站的背景，我遇到问题，使它看起来正确与所有页面大小。图像是291x1080，我正在做一个repeat-x。所有不超过1080p的页面都可以。但是，对于内容较多的页面或分辨率大于1080p的屏幕，背景后面会出现空白区域。我不想做一个简单的重复y因为渐变从一个光明变为黑暗而没有过渡会很奇怪。有没有办法在每次使用CSS进行重复时翻转背景图像？

Answer 1

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

例如：

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?

Answer 2

这是执行此操作的CSS：

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