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

最後に確認したところ、1 つの要素に 2 つの背景画像を配置することはできません。
CSS3 ではこれを行うことができますが、一部のブラウザーでは機能しません。 これが互換性の表です。

内部#cover-artに別の要素を作成し、背景画像を除いて同じ CSS をその子に適用することをお勧めします。

たとえば

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

#child'の背景画像は親の上になります ( #cover-art)

例としてこのフィドルを確認してください。

于 2012-10-05T02:44:09.913 に答える