javascript - 使用 .css() jQuery 方法更改背景图像的问题

Question

我正在使用 .css() jQuery 方法更改 ID 为“background”的 div 的背景。该方法接受属性名称和您要为其设置的值作为参数。因此，我的代码如下:

function changeBackground() {
      $("#background").css("background-image", "url(../assets/background2.jpg)");
}

window.onload = function() {
      window.addEventListener("click", changeBackground);
};

最初，background-image 的值为 url(../assets/background.jpg)。奇怪的是，它在我的编辑器 (Brackets.io) 用作实时预览的 Chrome session 中运行良好，但当我正常打开 Chrome 或使用 Firefox 和 Opera 时却没有。

编辑:问题出在路径上:不是临时更改 css 表中的值(我认为代码所做的)，显然 jQuery 本身确保后台源更改。这意味着图像的路径必须相对于 javascript 文件设置——在本例中为 url(assets/background2.jpg) 而不是 url(../assets/background2.jpg )。如果需要，我希望任何知识渊博或口语更好的人纠正我。

然而，另一个问题出现了——在 jQuery 更改其源代码后，背景图像的其余样式(见下文)被完全忽略。你如何解决这个问题？

#background {
background-image: url(../assets/background.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;    
position: fixed;
top: 0em;
left: 0em;
height: 100%;
width: 100%;    
margin: 0em;
}

Answer 1

使用 ' 而不是 ":

$("#background").css("background-image", 'url(../assets/background2.jpg)');

如果不行，试试这个

$("#background").css({backgroundImage : 'url(../assets/background2.jpg)'});

或者这个

$("#background").css('background', 'url("../assets/background2.jpg")');