用javascript改变背景图像时，梯度保持不变
用javascript改变背景图像时，梯度保持不变
提问于 2013-11-18 11:17:09
我有一个背景图像，我想改变每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');"
}但这样图像就不会变了。谁能告诉我如何改变背景图像，但仍然保持梯度？提前感谢！
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-11-18 11:25:14
使用style.background将影响background的所有属性。但是，如果您特别希望针对backgroundImage，请使用下面提到的代码。
function changeImage()
{
document.getElementById('carBanner').style.backgroundImage = "url('haegri.png')";
}更新：
因为这个方法似乎不起作用，所以我把这把小提琴贴在了kush提到的线上。只要您只想在两个图像之间交换，这个方法就可以工作。
它基本上使用两个不同背景图像的类。单击而不是只更改图像，删除以前的类并应用新类。
http://jsfiddle.net/gtej2/
我仍将寻找更优雅的解决方案，并将更新小提琴很快。
Stack Overflow用户
发布于 2013-11-18 11:20:38
使用CSS类来控制这种行为，您可以在javascript中从元素中添加或删除类。您的CSS类可以设置背景和渐变。
Stack Overflow用户
发布于 2013-11-18 11:19:07
对于图像的使用：
background-image
或者在你的代码中：
.style.backgroundImage ...
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20046442
复制相关文章
相似问题
腾讯云开发者
