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

Keep gradient the same when changing background image with javascript

本文关键字：渐变 图像 javascript 背景 使用      更新时间：2023-09-26

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

但这样的形象就不会改变。有人能告诉我如何改变背景图像并保持渐变吗？提前感谢！

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

使用style.background将影响background的所有属性。但是，如果您特别希望以backgroundImage为目标，请使用下面提到的代码。

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

更新：

由于这种方法似乎不起作用，我将这个小提琴张贴在kush提到的行上。只要你只想在两个图像之间切换，这个方法似乎就可以工作。

它基本上使用两个具有两个不同背景图像的类。单击时，不再只更改图像，而是删除上一个类并应用新类。

http://jsfiddle.net/gtej2/

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

对于图像使用：

background-image

或者在您的代码中：

.style.backgroundImage。。。

使用覆盖层怎么样？放置一个设置图像的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);
});

这看起来是这样的：http://jsfiddle.net/QtBlueWaffle/Tj7j5/1/

相关文章：