使用javascript更改背景图像时保持渐变不变

我有一个背景图像，我想每10秒改变一次。然而，我有一个梯度在图像的顶部，我不想改变，当我改变图像。这是原始css：

#carBanner 
{
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(230, 230, 230, 1) 100%), url('TS12-COVER.jpg');
}

然后我有一个javascript，它有一个每10秒调用一次的函数，函数如下所示：

function changeImage()
{
    document.getElementById('carBanner').style.background = "url('haegri.png')";
}

当我这样做时，渐变不再出现在图片顶部。。我也试过：

function changeImage()
{
    document.getElementById('carBanner').style.background = "linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(230, 230, 230, 1) 100%), url('haegri.png');"
}

但这样的形象就不会改变。 谁能告诉我如何改变背景图像并保持梯度？提前谢谢

对于图像使用：

背景图像

或者在您的代码中：

---

.style.backgroundImage

..

使用CSS类来控制此行为，您可以在javascript中添加或删除元素中的类。CSS类可以设置背景和渐变。

使用

样式。背景

将影响

背景

的所有属性。但是，如果您特别想要定位

背景图像

，请使用下面提到的代码

function changeImage()
{
    document.getElementById('carBanner').style.backgroundImage = "url('haegri.png')";
}

更新：

由于这种方法似乎不起作用，我把这把小提琴放在库什提到的线上。只要您只想在两个图像之间切换，此方法似乎就可以工作

它基本上使用了两个类和两个不同的背景图像。单击而不是仅仅更改图像，以前的类将被删除并应用新类

---

我仍在寻找更优雅的解决方案，并将很快更新fiddle。

使用覆盖层怎么样？将一个div放置在要设置图像的div上，将另一个div放置在要设置渐变的div上

因此，您必须正确设置覆盖，但使用JS非常简单：

$(document).ready(function () {

    // Set the overlay over the image slider
    var left = $("#test").offset().left;
    var top = $("#test").offset().top;
    $("#overlay").css('left', left + 'px');
    $("#overlay").css('top', top + 'px');

    // Change your image
    setInterval(changeImage,1000);
});

---

这看起来是这样的：

这仍然会使渐变消失。它现在可以工作了。谢谢如果你找到了更干净的解决方案，请告诉我：）@GudrunOlafs:clearner知道你只需要一个css图像就可以使用你想要的img数量我试过了，就像上面Gaurav建议的那样，但梯度仍然消失了。