使用jQuery CSS属性设置背景图像

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

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

这似乎不起作用，因为：

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

返回none。

任何想法，我在做什么错？

您可能想要这样做（使其像普通的CSS背景图像声明一样）：

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

您需要像这样在imageUrl前后加上双引号（“）：

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

这样，如果图像中有空格，它将仍然被设置为属性。

除了其他人的正确建议，我发现通常更容易切换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');

这是我的代码：

$（'body'）。css（'background-image'，'url（“ / apo / 1.jpg”）'）;

享受，朋友

除了其他答案，您还可以使用“背景”。当您要设置与背景使用图像方式有关的其他属性时，这特别有用，例如：

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

对于使用实际URL而不是变量的用户：

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

尝试修改“样式”属性：

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');

字符串插值可用于救援。

let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);

我遇到的问题是，我一直;在url()值的末尾添加分号，这使代码无法正常工作。

不适用的代码：

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

工作代码：

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

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

别忘了jQuery css函数允许传递对象，这允许您同时设置多个项目。回答的代码将如下所示：

$(this).css({'background-image':'url(' + imageUrl + ')'})

$（'myObject'）。css（{'background-image'：'url（imgUrl）'，}）;