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)' 
});