0

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

这是原始 CSS 的样子..

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

我想通过 jquery 做的是在第一个下面添加另一个图像 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-art css 在外部样式表中。

4

3 回答 3

3

干得好。请记住，这不适用于许多超过几年的浏览器：

var _oCurr = jQuery('#cover-art');
var _sBg = _oCurr.css('background-image');
_oCurr.css('background-image', _sBg + ', url(/img/banner2.png)');
于 2012-10-05T02:56:11.170 回答
1

试试这个：

var $el = $('#cover-art');
var bg = $el.css('background-image'); // old image
$el.css('background-image', bg +','+ 'img/banner2.png'); // add new image
于 2012-10-05T02:26:57.953 回答
0

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

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

所以例如

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

#child's 背景图像将在父级 ( #cover-art)上方

以这个小提琴为例。

于 2012-10-05T02:44:09.913 回答