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

【问题标题】：Setting background-image using jQuery CSS property使用 jQuery CSS 属性设置背景图像
【发布时间】：2010-10-05 10:51:23
【问题描述】：

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

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

这似乎不起作用，因为：

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

返回none。

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

【问题讨论】：

到底是什么问题？ Jquery 是否抛出错误？
不，它没有正确设置。我正在记录它，它只是没有改变。
第一次 jQuery 不尝试猜测用户的意思。

标签： javascript jquery css

【解决方案1】：

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

❌ 代码无效：

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

✅ 工作代码：

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

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

【讨论】：

这很好用，因为 jQuery 可以将它附加到样式属性。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

我是这样做的——但是 'url' 和左括号之间的空格导致我的代码失败。复制/粘贴你的并意识到问题。谢谢！
我在这个脚本中使用了你的代码，但是给我背景图片：url((unknown));这是我的脚本： var bg_img = jQuery('.wp-show-posts-inner').attr('data-src'); jQuery('.wp-show-posts-inner').on('mouseover',function() { jQuery('.home-banner .bg').css('background-image', 'url(' + bg_img + ')'); });知道为什么吗？
url() 对我不起作用。该值必须在引号内，即 url("") 或 url('').

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

这不起作用，因为 url 用单引号括起来。

【解决方案6】：

尝试修改“style”属性：

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

【讨论】：

将替换所有其他样式。不推荐

【解决方案7】：

字符串插值来拯救。

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

当我认为原始操作使用背景而不是背景图像时，这个答案更有意义。我已经修改了我的答案以使其更有意义，无论如何我都会将其留在这里以供后代使用。

【解决方案9】：

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

【讨论】：

这是一种更好的处理方式，因为它允许您使用 css 预处理器。
这很好，比更直接的解决方案要好得多。
这将加载两个图像。
这实际上是推荐的解决方案吗？似乎这不必要地需要更多信息，例如如果有第三个可能的背景图像，您将需要删除所有其他背景图像，或者跟踪“当前”图像。还有配置细节，比如 .css 文件中的这些 URI 让我发疯。 :smiley: 我必须搜索所有代码！
使用这样的类也是我的偏好，因为它可以让您在代码和样式之间保持清晰的分离。然后，我可以更改 css 中的所有图像和动画（通过媒体选择器等），而不会弄乱代码。如果您将图像保留在代码之外，则不必搜索整个代码！

【解决方案10】：

这是我的代码：

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

享受吧，朋友

【讨论】：

【解决方案11】：

您需要在 imageUrl 前后添加双引号 (")，如下所示：

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

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

【讨论】：

这种情况下应该是$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');
不需要引号：stackoverflow.com/questions/2168855/css-url-are-quotes-needed
这为我解决了。我需要有双引号。我的图像名称确实包含空格。否则，什么都不会发生。我可以让$('.myObject').css('background-color', 'green'); 之类的东西工作，但不能在没有双引号的情况下更改图像。谢谢！
如果您的部分 URL 已包含 URL 转义字符，encodeURIComponent 将不起作用。不过，您应该在 imageUrl 中转义潜在的双引号字符：$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');
顺便说一句，做$('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');给了我background-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");