使用jQuery CSS属性设置background-image

Question

我在imageUrl变量中有一个图像URL,我试图使用jQuery将其设置为CSS样式:

$('myObject').css('background-image', imageUrl);

这似乎不起作用,如:

console.log($('myObject').css('background-image'));

回报none.

任何想法,我做错了什么？

Answer 1

你可能想要这个(使它像普通的CSS背景图像声明):

$('myObject').css('background-image', 'url(' + imageUrl + ')');

Answer 2

你想在imageUrl之前和之后包含双引号("),如下所示:

$('myOjbect').css('background-image', 'url("' + imageUrl + '")');

这样,如果图像有空格,它仍将被设置为属性.

Answer 3

作为其他人正确建议的替代方案,我发现通常更容易切换CSS类,而不是单独的CSS设置(尤其是背景图像URL).例如:

// in CSS 
.bg1 
{
  background-image: url(/some/image/url/here.jpg);
}

.bg2 
{
  background-image: url(/another/image/url/there.jpg);
}

// in JS
// based on value of imageUrl, determine what class to remove and what class to add.
$('myOjbect').removeClass('bg1').addClass('bg2');

Answer 4

这是我的代码:

$('body').css('background-image', 'url("/apo/1.jpg")');

享受,朋友

Answer 5

除了其他答案,您还可以使用"背景".当您想要设置与背景使用图像的方式相关的其他属性时,此功能尤其有用,例如:

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");

Answer 6

对于那些使用实际URL而不是变量的人:

$('myObject').css('background-image', 'url(../../example/url.html)');

Answer 7

我遇到的问题是，我一直;在url()值的末尾添加一个分号，这会阻止代码工作。

? 不工作代码：

$('#image_element').css('background-image', 'url(http://example.com/img.jpg);');

? 工作代码：

$('#image_element').css('background-image', 'url(http://example.com/img.jpg)');

请注意;工作代码末尾省略的分号。我只是不知道正确的语法，而且很难注意到它。希望这可以帮助同一条船上的其他人。