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

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

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

这似乎并不奏效，因为:

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

返回none。

知道我哪里做错了吗?

727854 次浏览
小开
最佳答案

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

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

你需要在imageUrl之前和之后包括双引号(")，就像这样:

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

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

小开

这是我的代码:

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

Enjoy, friend

小开

或者其他正确的建议，我发现它更容易通常切换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');
小开

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

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

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

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

字符串插值来拯救。

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

尝试修改"style"属性:

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');
小开 
$('myObject').css({'background-image': 'url(imgUrl)',});
小开

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

❌NOT WORKING CODE:

$('#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 + ')'})


提交答案