在CSS中重复y上翻转背景图像

我有一个梯度图像作为背景，我的网站，我有问题，使它看起来正确的所有页面大小。图像是291x1080，我让它重复x。对于所有不大于1080p的页面，这是可以接受的。但是，对于内容较多的页面或分辨率大于1080p的屏幕，背景后面会出现空白。我不想做一个简单的重复，因为没有过渡，从亮到暗的梯度会很奇怪。是否有任何方法可以在每次使用CSS重复y时翻转背景图像？

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

例如：

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

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

如需进一步参考，请查看以下内容：

---

这是执行此操作的css：

正文{
...
背景：#eeeeeeeeurl（“/static/img/background.png”）0 0 repeat-x；
...
}

问题在于，它实际上并没有扩展纹理，只是在末尾添加了白色（ish）空间。图像底部没有纹理。底部是实心的。看一看：我知道，在我看来，他试图实现的是让图像重复，而不让它看起来很奇怪。你的方法很好，但我不确定这是否是期望的结果。它重复，但它有一个问题，即从亮到暗没有过渡。不，你需要去除织物的梯度。哦，我明白你现在的意思了。Still实际上与其他答案相同，只是有更多的纹理。虽然我没有能力移除渐变，但是纹理看起来和iOS/Mac OSX纹理一样，这取决于你，但是我认为这种方法看起来更好。