通過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添加另一個背景圖片

回答

相關問題