JQuery - 更改多个背景图像答案

【问题标题】：JQuery - change multiple background imagesJQuery - 更改多个背景图像
【发布时间】：2016-04-16 21:29:15
【问题描述】：

我有一个使用 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"});
        });

如果知道如何做到这一点的人能帮助我，我将不胜感激。谢谢你的建议。

【问题讨论】：

不要在标题中写“已解决”，而是通过单击灰色复选标记接受有效的答案

标签： javascript jquery html css background

【解决方案1】：

用javascript设置多个背景图片，只设置一次样式，但以多个背景的字符串为值，否则每次重置样式都会覆盖以前的等等。

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

【讨论】：