使用 javascript 合并背景 css

Question

谁知道如何添加 css 背景而不用 js 替换以前的背景？

例如，

<div style = "background: url (image.png)"> </ div>

添加后

<div style = "background: url (image2.png), url (image.png)"> </ div>

Answer 1

只获取背景值，再追加一个url(img_url)

var my_div= document.querySelector("my_div");
if( my_div.style.background == "" )
 my_div.style.background= "url(image.png)";
else
 my_div.style.background+= ",url(image2.png)";

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

Answer 2

您可以使用 CSS 类并在需要时在类之间切换。

.class_one {
    background: url (image.png);
}

.class_two {
    background: url (image2.png), url (image.png);
}

Answer 3

这是 Javascript 解决方案：

var backgroundStyle = document.querySelector("#container").style.background;

document.querySelector("#container").style.background = backgroundStyle + ", url('http://res.cloudinary.com/demo/image/upload/sample.jpg')";

<div style = "background: url('http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg')" id="container" >
</div>

您可以使用开发者工具验证它/FireBug。

使用 javascript 合并背景 css

Combine background css using javascript

javascript

css

background