首页 文章

使用jQuery CSS属性设置background-image

提问于
浏览 次
342

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

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

这似乎不起作用，因为：

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

返回 none .

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

javascript jquery css

9 回答

  • 5

    你想在imageUrl之前和之后包含双引号（“），如下所示：

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

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

    回复于
  • 64

    字符串插值救援 .

    let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);
    回复于
  • 42
    $('myObject').css({'background-image': 'url(imgUrl)',});
    回复于
  • 854

    你可能想要这个（使它像普通的CSS背景图像声明）：

    $('myObject').css('background-image', 'url(' + imageUrl + ')');
    回复于
  • 3

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

    $('myObject').css('background-image', 'url(../../example/url.html)');
    回复于
  • 13

    尝试修改“样式”属性：

    $('myObject').attr('style', 'background-image: url("' + imageUrl +'")');
    回复于
  • 15

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

    $("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");
    回复于
  • -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');
    回复于
  • 2

    这是我的代码：

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

    享受，朋友

    回复于

相关问题