Question

我在imageUrl变量中有一个图片网址，我正在尝试使用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

对于那些使用实际网址而不是变量的人：

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

Answer 7

尝试修改“样式”属性：

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

Answer 8

救援的字符串插值。

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

Answer 9

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

无效代码：

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

工作代码：

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

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

Answer 10

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

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

Answer 11

$('myObject').css({'background-image': 'url(imgUrl)',});

使用jQuery CSS属性设置background-image

11 个答案: