通过jquery添加另一个背景图像

Question

我想在我的div元素中添加另一个背景图像，但是我不想简单地覆盖现有的图像，我想有多个背景，所以它应该在第一个下面添加新的背景URL。

这是原始CSS的样子。

#cover-art {
    background:
        url('http://beta.mysite.net/img/banner1.png') top left no-repeat,
    padding:250px 0 0;
}

我想通过 jquery 做的是在第一个图像 url 行下面添加另一个图像 url 行，就像这样......

#cover-art {
    background:
        url('http://beta.mysite.net/img/banner1.png') top left no-repeat,
            url('http://beta.mysite.net/img/banner2.png') top left no-repeat,
    padding:250px 0 0;

}

另外需要注意的是，#cover 艺术 css 位于外部样式表中。

Answer 1

你去吧。请记住，这不适用于许多超过几年的浏览器：

var _oCurr = jQuery('#cover-art');
var _sBg = _oCurr.css('background-image');
_oCurr.css('background-image', _sBg + ', url(/img/banner2.png)');

Answer 2

试试这个：

var $el = $('#cover-art');
var bg = $el.css('background-image'); // old image
$el.css('background-image', bg +','+ 'img/banner2.png'); // add new image

Answer 3

最后我检查了一下，你不能在一个元素上有两个背景图像。
CSS3 允许您这样做，但它不适用于某些浏览器。下面是兼容性图表。

我建议您在#cover-art中创建另一个元素，并将相同的 CSS 应用于其子元素，除了背景图像。

所以例如

<div id="covert-art">
    <div id="child"></div>
</div>

#child'的背景图像将位于父图像上方（#cover-art）

以这把小提琴为例。