使用JQuery將兩個背景圖像添加到主體

我需要使用JQuery將兩個單獨的背景圖像添加到主體標籤。最初這是用以下類實現的：使用JQuery將兩個背景圖像添加到主體

.background: url(../img/ad-takeoverbkg-left.jpg) top left no-repeat, url(../img/ad-takeoverbkg-right.jpg) top right no-repeat;

而且這個工作正常但是我現在需要通過JavaScript動態地提供URL值。這些值是使用AJAX從JSON數組中檢索的。我現在有的代碼是：

$('body').css({ 
'background-image' : 'url(' + data.leftWpTakeover + ')', 
'background-position' : 'top left', 
'background-repeat': 'no-repeat', 
'background-image' : 'url(' + data.rightWpTakeover + ')', 
'background-position' : 'top right', 
'background-repeat': 'no-repeat' 
});

這可以工作，但第二個圖像替換第一個只留下第二個圖像添加。我需要代碼將兩個背景圖像添加到body標籤。你能幫忙嗎？

謝謝。

來源

2017-07-15 N.Widds

你可以通過這樣它們之間的逗號列出他們的背景添加多張圖片：

'background-image' : 'url(' + data.leftWpTakeover + '), url(' + data.rightWpTakeover + ')'

來源

2017-07-15 13:31:49 Kaloyan

嗨的Kaloyan。感謝您的迴應，但我該如何添加其他元素？我需要圖像1爲「左上不重複」，圖像2爲「右上不重複」。當我嘗試添加它時失敗。 –

我通過爲每個附加屬性添加單獨的$（「body」）.css調用來獲得此工作。感覺笨重，但它的工作，所以感謝指出我在正確的方向。 –

謝謝。我很樂意提供幫助。 – Kaloyan

使用JQuery將兩個背景圖像添加到主體

回答

相關問題