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

I have an image URL in a imageUrl variable and I am trying to set it as CSS style, using jQuery:

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

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

This seems to be not working, as:

这似乎不起作用，因为:

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

returns none.

返回none。

Any idea, what I am doing wrong?

知道吗，我做错了什么?

9 个解决方案

#1

825

You probably want this (to make it like a normal CSS background-image declaration):

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

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

#2

You'll want to include double quotes (") before and after the imageUrl like this:

您需要在imageUrl前后包含双引号(")，如下所示:

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

This way, if the image has spaces it will still be set as a property.

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

#3

Alternatively to what the others are correctly suggesting, I find it easier usually to toggle CSS classes, instead of individual CSS settings (especially background image URLs). For example:

另外，对于其他人的正确建议，我发现切换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');

#4

Here is my code:

这是我的代码:

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

Enjoy, friend

喜欢,朋友

#5

Further to the other answers, you can also use "background". This is particularly useful when you want to set other properties relating to the way the image is used by the background, such as:

除此之外，你还可以使用“背景”。当您希望设置与背景使用图像的方式相关的其他属性时，这一点特别有用，例如:

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

#6

For those using an actual URL and not a variable:

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

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

#7

String interpolation to the rescue.

字符串插值拯救。

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

#8

Try modifying the "style" attribute:

尝试修改“style”属性:

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

#9

-2

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

#1

825