使用jQuery CSS属性设置background-image

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

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

这似乎不起作用,如:

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

回报none.

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

1> Greg..：

---

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

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

2> Arosboro..：

---

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

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

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

---

在这种情况下,它应该是`$('myObject').css('background-image','url('+ encodeURIComponent(imageUrl)+')');`

---

报价不是必需的:http://stackoverflow.com/questions/2168855/css-url-are-quotes-needed

---

网址中不能包含空格.空间需要编码.

3> Kon..：

---

作为其他人正确建议的替代方案,我发现通常更容易切换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');

---

这是一种更好的方法,因为它可以让你使用css预处理器.

4> 小智..：

---

这是我的代码:

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

享受,朋友

5> Matt Parkins..：

---

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

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

6> Dusty..：

---

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

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