JQuery的 - 改變多背景圖片

Question

我有使用8個圖像創建一個框架上的CSS代碼：

background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/blue/r.png); 
background-position: top left, right top, bottom left, bottom right, top, bottom, left,right; 
background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y; 

我的目標是做一個jQuery程序，可以改變來源不同的圖像。我有一個問題，定義了多個背景圖像的JQuery的變化。我總是最終只有一個圖像變化。

jQuery代碼：

$(document).ready(function() { 
     $("#red").on("click", function(){ 
      $("#outer-frame").css({'background-image': "url(images/red/tl.png)", 'background-image': "url(images/red/tr.png)"}); 
      $("#outer-frame").css({'background-position': "top left", 'background-image': "top right"}); 
     }); 

我真的很感激，如果有人誰知道如何做到這一點會幫助我。 謝謝你的建議。

Answer 1

要設置使用javascript多背景圖片，設置樣式只有一次，但多背景作爲值的字符串，否則風格的每個復位覆蓋以前的等

$("#outer-frame").css({ 
    'background-position' : 'top left', 
    'background-image' : 'url(images/red/tl.png), url(images/red/tr.png)' 
});