javascript - 使用 javascript 更改背景图像时保持渐变相同

Question

我有一个背景图像，我想每 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');"
}

但是图像不会改变。 谁能告诉我如何更改背景图像并仍然保持渐变？提前致谢!

Answer 1

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