背景图像通过背景位置淡入另一个

Question

代码片段：https://jsfiddle.net/foy4m43j/

HTML：

<div id="background"></div>

CSS：

#background {
    background-image: url("http://i.imgur.com/hH9IWA0.png");
    background-position: 0 0;
    background-repeat: repeat;
    height: 100%;
    width: 100%;
    position: fixed;
}

从这里开始，我想使用它background-position来产生这种效果，以包含淡入淡出和新颜色（黑色线条表示我们正在移动的方向）：

示例图片（请原谅不良出口）：

这可以通过jQuery或CSS吗？我用background-position和多张图片抓住了我如何做到这一点。

到目前为止，这是我可怕的尝试。我不明白为什么渐变向另一个方向走，我不知道如何让黄色重复到正确的X轴： https://jsfiddle.net/foy4m43j/1/

我希望我足够清楚。除了没有回应的问题之外，我找不到任何类似的问题。

Answer 1

您可以使用CSS渐变。到目前为止，这是最好的解决方案，而且很容易制作： www.colorzilla.com