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

我想添加另一个背景图片到我的div元素，但我不想简单地写现有的，我想有多个背景，所以它应该添加新的背景网址低于第一个。通过jquery添加另一个背景图片

这里是原来的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;

}

也未尝需要注意的是＃封面艺术CSS是在外部样式表。

来源

2012-10-05 Imran

无关你的问题，但你需要做的是在逗号后不重复分号您的背景图片属性结尾（在两个代码块中）。 –

@劳伦斯约翰逊它实际上是在我原来的代码，但我复制了第二个图像的第一行，因为它更容易复制和粘贴，而不是改变没有做到这一点的大声笑 – Imran

你在这里。请记住，这不会有很多浏览器是超过一对夫妇岁工作：

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

来源

2012-10-05 02:56:11

我已经在jsfiddle中重新创建了这个，请点击此处：http://jsfiddle.net/YtysX/1/ 我无法使用它 – Imran

您的大部分问题都来自不良的CSS。试试这个：http://jsfiddle.net/YtysX/4/ –

不要忘记，background-image属性完全不同于背景属性。你不能重复职位，重复等。如果你使用多个背景，我强烈建议你使用单独的语句来声明职位，重复等等。 –

试试这个：

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-05 02:26:57 elclanrs

，只尝试了网址以及整行 – Imran

这几乎是正确的。您需要将路径包装为url（...）中的图像，如我在下面的示例中所示。 –

~~上次我检查，你不能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作为一个例子的上方。

来源

2012-10-05 02:44:09

你绝对可以有多个背景图片。 –

@劳伦斯约翰逊你说得对。使用CSS3 ...但很多浏览器都不支持它。 –

如果你在两年前说过，我会同意你的看法。现在约有90％的浏览器支持它。我不会呼叫很多不支持它的浏览器;我几乎没有打电话。为便于参考，这里是不支持的主要浏览器：IE8及更低版本，Safari 5.0及更低版本。就是这样。自从FF3 iirc，Opera和Chrome自永远以来（实际上已经有了它）以来，Firefox已经拥有了它，但它们自动更新，几乎没有人使用旧版本。 –

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

回答

相关问题