blocks|key|649211|text|正如documentation中所述，您需要使用想要控制的样式的Javascript名称。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|649212|这意味着您必须使用backgroundImage而不是background-image。|style|CODE|649213|如下所示：|649214|<div+data-bind="foreach:+itemList">+
++++<div+data-bind="style:+{+backgroundImage:+'url(temp.png)'+}">some+text</div>
</div>|code-block|syntax|javascript|649215|entityMap|0|LINK|mutability|MUTABLE|url|http://knockoutjs.com/documentation/style-binding.html^0|2|D|0|0|9|F|R|G|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@$A|11|B|12|F|G]|$A|13|B|14|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|15|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|16|8|@]|9|@]|C|$M|N]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>As stated in the <a href="http://knockoutjs.com/documentation/style-binding.html">documentation</a>, you need to use the Javascript name for the style you want to control.</p>

<p>This means that you would have to use <code>backgroundImage</code> instead of <code>background-image</code>.</p>

<p>Something like this:</p>

<pre><code>&lt;div data-bind="foreach: itemList"&gt; 
    &lt;div data-bind="style: { backgroundImage: 'url(temp.png)' }"&gt;some text&lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|434816|text|只需在属性名称两边加上引号(单引号)。只要属性名称中有-，例如background-image或background-url，就需要在名称两边加上引号|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|434817|<div+data-bind="style:+{'background-image'+:+'url(somepath)'}>|code-block|syntax|javascript|434818|这就是问题所在。在Knockout文档中提到。|434819|entityMap^0|R|1|V|G|1C|E|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>Just put quotes (single quotes) around the property name. whenever your have <code>-</code> in the property name e.g. <code>background-image</code> or <code>background-url</code> you need to put quotes around the name</p>

<pre><code>&lt;div data-bind="style: {'background-image' : 'url(somepath)'}&gt;
</code></pre>

<p>That is the problem. Mentioned in the Knockout documentation.</p>


blocks|key|434890|text|基于KO文档，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|434891|要设置为KO中任何属性的值是ViewModal属性值。|434892|其中somepath+=+ViewModal属性，它是背景图像的路径。|434893|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>based on KO documentation,</p>

<p>VALUE to be SET to any Property in KO is ViewModal Property Value.</p>

<p>where somepath = ViewModal Property that is PATH to your background image.</p>


blocks|key|434931|text|当有两个名字时，第一个名字小写，第二个名字第一个字符大写。示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|434932|color+=+color
background-color+=+backgroundColor
font-style+=+fontStyle
font-weight+=+fontWeight+|code-block|syntax|javascript|434933|请参考http://knockoutjs.com/documentation/style-binding.html和http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html|offset|length|434934|entityMap|0|LINK|mutability|MUTABLE|url|http://knockoutjs.com/documentation/style-binding.html|1|http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html^0|0|0|3|1I|0|1M|20|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]|$I|10|J|11|1|12]]|A|$]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]|S|$5|N|O|P|A|$Q|T]]]]

<p>When there are two names, use the first name in lower case and the first character of the second name in upper case. Examples:</p>

<pre><code>color = color
background-color = backgroundColor
font-style = fontStyle
font-weight = fontWeight 
</code></pre>

<p>please refer to <a href="http://knockoutjs.com/documentation/style-binding.html" rel="nofollow">http://knockoutjs.com/documentation/style-binding.html</a>
and <a href="http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html" rel="nofollow">http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html</a></p>


blocks|key|435019|text|我不确定为什么每个人(除了Sujesh)都在回答这个问题，并且仍然硬编码temp.png。如果你没有绑定到ko.observable属性，那么就不要使用data-bind。只需使用html元素的标准样式属性即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|435020|<div+data-bind="foreach:+itemList">
++++<div+style="background-image:+url('temp.png');">some+text</div>++++++++++
</div>|code-block|syntax|javascript|435021|对于获取url的数据绑定，我希望Sujesh+Arukil的答案对我有效，但它没有。如果有人使用它，请告诉我。|435022|以下是对我有效的方法，但我并不关心它。我使用计算机来获得背景图像的值。|435023|在视图模型中|435024|self.imageUrl+=+ko.observable();

self.bgImageUrlStyle+=+ko.computed(function()+{
++++return+"url("+%2B+self.imageUrl()+%2B+")";
});|435025|在HTML中|435026|<div+data-bind="style:+{+'background-image':+bgImageUrlStyle+}">
</div>|435027|entityMap^0|10|8|1H|D|24|9|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|17|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|18|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1A|8|@]|D|@]|E|$]]|$1|U|3|V|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|W|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|X|$]]

<p>I'm not sure why everyone (except Sujesh) is answering this question and still hard coding the <code>temp.png</code>.  If you are not binding to a <code>ko.observable</code> property then don't use <code>data-bind</code>. Just use the standard style property of the html element.</p>

<pre><code>&lt;div data-bind="foreach: itemList"&gt;
    &lt;div style="background-image: url('temp.png');"&gt;some text&lt;/div&gt;          
&lt;/div&gt;
</code></pre>

<p>For data binding to get the url I wish Sujesh Arukil's answer worked for me but it didn't.  If anyone has that working, please enlighten me.</p>

<p>Here is what worked for me but I don't care for it.  I used a computed to get the value of the background-image.</p>

<p>In the view model</p>

<pre><code>self.imageUrl = ko.observable();

self.bgImageUrlStyle = ko.computed(function() {
    return "url(" + self.imageUrl() + ")";
});
</code></pre>

<p>In the HTML</p>

<pre><code>&lt;div data-bind="style: { 'background-image': bgImageUrlStyle }"&gt;
&lt;/div&gt;
</code></pre>


blocks|key|649550|text|或者只是拼接|type|unstyled|depth|inlineStyleRanges|entityRanges|data|649551|<div+data-bind="style:+{+backgroundImage:+'url(\''+%2B+$data.videoImg+%2B+'\')'+}">+</div>|code-block|syntax|javascript|649552|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|$]]

<p>or just concatenate</p>

<pre><code>&lt;div data-bind="style: { backgroundImage: 'url(\'' + $data.videoImg + '\')' }"&gt; &lt;/div&gt;
</code></pre>


blocks|key|649676|text|顺便说一句，您可以设置一个自定义绑定，使语法不那么笨拙：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|649677|ko.bindingHandlers.backgroundImage+=+{
++update:+function(element,+valueAccessor)+{
++++ko.bindingHandlers.style.update(element,
++++++function(){return+{backgroundImage:+"url('"+%2B+valueAccessor()+%2B+"')"}});
++}
};|code-block|syntax|javascript|649678|然后，在HTML中，您可以执行以下操作|649679|<div+data-bind="backgroundImage:+image"></div>|649680|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>By the way, you can set up a custom binding to make the syntax less unwieldy:</p>

<pre><code>ko.bindingHandlers.backgroundImage = {
  update: function(element, valueAccessor) {
    ko.bindingHandlers.style.update(element,
      function(){return {backgroundImage: "url('" + valueAccessor() + "')"}});
  }
};
</code></pre>

<p>Then in your HTML you can do</p>

<pre><code>&lt;div data-bind="backgroundImage: image"&gt;&lt;/div&gt;
</code></pre>


blocks|key|649751|text|当你说:+data-bind:"{...somecode...}“时，你需要明白你是在javascript内部。如果你写:+background-image，他会试着从背景中减去image+(+background+Image)。这些都是未定义的变量。那就清楚多了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|649752|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>When u say: data-bind:"{...somecode...}" you need to understand that u are inside of javascript. If you write: background-image he tries to subtract image from background (background-image). Thats are undefined variables. Then it is much clearer.</p>


blocks|key|649809|text|<div++data-bind="style:+{+background:+'url('+%2B+imageUrl+%2B+')'+}"+></div>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|649810|我使用的上面的方法应该是有效的。|649811|如果您使用background:+'url(imageUrl)'，它将仅被视为字符串。|649812|entityMap^0|0|20|0|0|5|R|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

<p><code>&lt;div  data-bind="style: { background: 'url(' + imageUrl + ')' }" &gt;&lt;/div&gt;</code></p>

<p>The above one i used suppose to work.</p>

<p>If you use<code>background: 'url(imageUrl)'</code>, it will consider as a string only.</p>


<p>Is it possible to make a style background-image binding? </p>

<p>I tried this code:</p>

<pre><code>&lt;div data-bind="foreach: itemList"&gt;
    &lt;div data-bind="style: { background-image: 'url:(temp.png)' }"&gt;some text&lt;/div&gt;          
&lt;/div&gt;
</code></pre>

<p>I also tried <code>backgroundImage</code>, without quotes in <code>url</code>, without <code>:</code> after <code>url</code>, but it's still not working. All the others, like <code>color</code> or <code>backgroundColor</code> bindings are working perfectly.</p>


How can I bind the CSS background-image property?

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

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

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

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

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

有没有可能做一个样式的背景图像绑定？我试过这段代码：<div data-bind="foreach: itemList">    <div data-bind="style: { background-image: 'url:(temp.png)' }">some text</div>          </div>我...

问如何绑定CSS背景图像属性？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何绑定CSS背景图像属性？EN