设置带有淘汰赛的背景图像：适用于 chrome 但不适用于其他浏览器答案

【问题标题】：Setting background-image with knockout: Works in chrome but not other browsers设置带有淘汰赛的背景图像：适用于 chrome 但不适用于其他浏览器
【发布时间】：2012-09-18 11:57:36
【问题描述】：

我正在使用敲除在某些 div 上设置背景图片：

<div class="values" data-bind="foreach: values" >
  <div class="cvsection" data-bind="style: {'background-image': backgroundimg}" style="background-repeat: no-repeat; background-size:100%;background-repeat: no-repeat; background-position: center bottom;">

    <!-- Stuff inside the div -->   
  </div>
</div>

在我的视图模型中，每个 value() 都有如下属性：

backgroundimg: 'url(i/img.jpg)'

背景图像在 Chrome 和 IE9 中按预期显示，但在 Firefox 15 或 IE8 中不显示。我在控制台中看不到任何 javascript 错误或任何东西。

您认为这是淘汰赛的问题，还是其他 CSS 问题？任何帮助将不胜感激！

【问题讨论】：

你能发JS Fiddle 来演示这个问题吗？

标签： css google-chrome knockout.js

【解决方案1】：

我想你的 sn-p 应该是

<div class="values" data-bind="foreach: values" >
  <div class="cvsection" data-bind="style: {backgroundImage: backgroundimg}" style="background-repeat: no-repeat; background-size:100%;background-repeat: no-repeat; background-position: center bottom;">

    <!-- Stuff inside the div -->   
  </div>
</div>

'background-image' 改为 backgroundImage

根据documentation：

如果您想应用字体粗细或文本装饰样式，或任何名称不是合法 JavaScript 标识符的其他样式（例如，因为它包含一个连字符），您必须使用 JavaScript 名称那种风格。

【讨论】：

【解决方案2】：

看看here，当它说：

注意：应用名称不是合法 JavaScript 变量名称的样式

如果您想应用字体粗细或文本装饰样式，或任何名称不是合法 JavaScript 标识符的其他样式（例如，因为它包含连字符），您必须使用 JavaScript 名称那种风格。例如，

不要写 { font-weight: someValue };写{ fontWeight：一些值}

不要写 { text-decoration: someValue };写{ textDecoration：一些值}

所以，如果你想应用css规则“background-image”，你必须在knockout的style binding中写上“backgroundImage”。

文档总能做到这一点；）

【讨论】：