向元素添加第二個背景圖像

Question

我想知道是否可以通過CSS3或jQuery/js將第二個背景圖像分配給元素。

爲了明確這一點我是知道我能做到這樣：

.someElement { background-image: url(sheep.png), url(betweengrassandsky.png); } 

的事情是我需要做的是這樣的：

.someElement    { background-image: url(sheep.png); } 
.someElement.secondClass { background-image: url(betweengrassandsky.png); } 

的問題是，這將只是覆蓋第一個背景圖像而不是合併它們。 有沒有解決這個問題的方法？

感謝

Answer 1

你必須爲你在CSS的第一行顯示重複第一背景圖像。

如果你願意，你可以檢查.someElement，看它是否具有第二類，並使用應用它的jQuery：

$('.someElement').each(function() { 
    if ($(this).hasClass('secondClass')) { 
     var background = $(this).css('background-image'); 
     $(this).css('background-image', background + ', url(betweengrassandsky.png)'); 
    } 
}); 

Answer 2

如何：

.someElement    { background-image: url(sheep.png); } 
.someElement.secondClass { background-image: url(sheep.png), url(betweengrassandsky.png); }