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类可以设置背景和渐变。

Answer 2

对于图像使用：

background-image

或者在您的代码中：

.style.backgroundImage ...

Answer 3

使用style.background会影响background的所有属性。但是，如果您特别想要定位backgroundImage，请使用下面提到的代码。

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

更新

由于这种方法似乎不起作用，我在kush上提到的这些小提琴上发布了这个小提琴。只要您想在2张图像之间切换，此方法似乎就可以正常工作。

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

http://jsfiddle.net/gtej2/

我仍然会寻找更优雅的解决方案，并会尽快更新。

Answer 4

使用叠加层怎么样？你放置一个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/

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

4 个答案: