Question

$(document).ready(function() {
    $('#picture').css('height', '666px');
    $('#picture').click(function () {
        $(this).css('background-image', "url('../images/picture_2.jpg')");
    });
});

在上面的代码中，height已成功更改为666px，但背景图像根本没有变化（仍然是原始图像）。

当我将background-image更改为'none'而不是“url（'../ images / picture_2.jpg'）时，它确实会使背景图像消失。

我做错了什么？

Answer 1

我的猜测是你输入的网址不正确。该网址应该与您所在的页面相关。我敢打赌你的网址是相对于CSS样式表的。通常，在JS中执行此操作时只需使用绝对路径。

您也不需要路径周围的单引号。

Answer 2

您提供的代码应该可以正常工作。我认为您提到的图片位置../images/picture_2.jpg不正确。检查您是否可以在firebug中看到该位置的图像。

我尝试了相同的代码，它对我来说很好。 DEMO这里

Answer 3

更正图像的路径。

图像的路径将从网站的根目录计算，而不是从css计算。

只是为了澄清：

高度将在页面加载时发生变化，只有在单击#picture元素时，背景图像才会发生变化。

Answer 4

这是demo，对我有用。

这与您尝试过的有何不同？

如何使用jquery更改css背景图像？

4 个答案: