Question

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

以下是原始CSS的样子..

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

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

#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-art 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

~~最后我检查过，1个元素上不能有两个背景图像。~~
CSS3允许您这样做，但它不适用于某些浏览器。 Here's a chart of compatibility

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

所以例如

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

#child'的背景图片位于父级（#cover-art）

之上

以this fiddle为例。

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

3 个答案: