blocks|key|1010352|text|您可能需要这样(使其类似于普通的CSS背景图像声明)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1010353|$('myObject').css('background-image',+'url('+%2B+imageUrl+%2B+')');|code-block|syntax|javascript|1010354|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>$('myObject').css('background-image', 'url(' + imageUrl + ')');
</code></pre>

blocks|key|3512312|text|您需要在imageUrl前后包含双引号(")，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3512313|$('myOjbect').css('background-image',+'url("'+%2B+imageUrl+%2B+'")');|code-block|syntax|javascript|3512314|这样，如果图像有空格，它仍将被设置为属性。|3512315|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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

<pre><code>$('myOjbect').css('background-image', 'url("' + imageUrl + '")');
</code></pre>

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

blocks|key|1015104|text|与其他人正确的建议不同，我发现切换CSS类通常比切换单独的CSS设置(特别是背景图像URL)更容易。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1015105|//+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');|code-block|syntax|javascript|1015106|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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: 

<pre><code>// 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');
</code></pre>

blocks|key|4360016|text|对于其他答案，您也可以使用"background“。当您要设置与背景使用图像的方式相关的其他属性时，这尤其有用，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4360017|$("myObject").css("background",+"transparent+url('"%2BimageURL%2B"')+no-repeat+right+top");|code-block|syntax|javascript|4360018|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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:

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

blocks|key|295212|text|对于那些使用实际URL而不是变量的用户：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|295213|$('myObject').css('background-image',+'url(../../example/url.html)');|code-block|syntax|javascript|295214|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For those using an actual URL and not a variable:

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

blocks|key|1010617|text|我遇到的问题是，我一直在url()值的末尾添加一个分号;，这会阻止代码正常工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1010618|：❌不工作的代码|BOLD|1010619|$('#image_element').css('background-image',+'url(http://example.com/img.jpg);');
//--------------------------------------------------------------------------%5E|code-block|syntax|javascript|1010620|工作代码：✅|1010621|$('#image_element').css('background-image',+'url(http://example.com/img.jpg)');|1010622|请注意工作代码末尾省略的分号;。我只是不知道正确的语法，真的很难注意到它。希望这能帮助其他处于同样境地的人。|1010623|entityMap^0|C|5|R|1|0|2|6|0|0|0|6|0|0|0|1I|E|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|13|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|14|8|@$9|15|A|16|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|17|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|18|8|@$9|19|A|1A|B|H]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1D|8|@]|D|@]|E|$]]]|U|$]]

The problem I was having, is that I kept adding a semi-colon <code>;</code> at the end of the <code>url()</code> value, which prevented the code from working.
❌ NOT WORKING CODE:
<pre class="lang-js prettyprint-override"><code>$('#image_element').css('background-image', 'url(http://example.com/img.jpg);');
//--------------------------------------------------------------------------^</code></pre>
✅ WORKING CODE:
<pre><code>$('#image_element').css('background-image', 'url(http://example.com/img.jpg)');
</code></pre>
Notice the omitted semi-colon <code>;</code> at the end in the working code. I simply didn't know the correct syntax, and it's really hard to notice it. Hopefully this helps someone else in the same boat.

blocks|key|4360089|text|尝试修改"style“属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4360090|$('myObject').attr('style',+'background-image:+url("'+%2B+imageUrl+%2B'")');|code-block|syntax|javascript|4360091|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try modifying the "style" attribute:

<pre><code>$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');
</code></pre>

blocks|key|1010599|text|字符串插值来解救。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1010600|let+imageUrl+=+'imageurl.png';
$('myOjbect').css('background-image',+`url(${imageUrl})`);|code-block|syntax|javascript|1010601|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

String interpolation to the rescue.

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

blocks|key|1010633|text|不要忘记，jQuery+css函数允许传递对象，这允许您同时设置多个项。然后，回答的代码将如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1010634|$(this).css({'background-image':'url('+%2B+imageUrl+%2B+')'})|offset|length|style|CODE|1010635|entityMap^0|0|0|1L|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

Don't forget that the jQuery css function allows objects to be passed which allows you to set multiple items at the same time. The answered code would then look like this:

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

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

<pre><code>$('myObject').css('background-image', imageUrl);
</code></pre>

This seems to be not working, as:

<pre><code>console.log($('myObject').css('background-image'));
</code></pre>

returns <code>none</code>.

Any idea, what I am doing wrong?

Setting background-image using jQuery CSS property

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我在一个CSS变量中有一个图像URL，我正在尝试使用jQuery将其设置为imageUrl样式：$('myObject').css('background-image', imageUrl);这似乎不起作用，因为：console.log($('myObject').css('background-image'));返回none。你知道我做错了什么吗？

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

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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