Question

我使用knockout在某些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>

在我的viewmodel中，每个value（）都有一个属性：

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

背景图片在Chrome和IE9中按预期显示，但不是Firefox 15或IE8。我在控制台或其他任何地方都没有看到任何javascript错误。

你认为这是淘汰赛或其他一些CSS问题吗？任何帮助将不胜感激！

Answer 1

我想你的代码片段应该是

<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名称那种风格。

Answer 2

看看here，当它说：

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

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

不要写{font-weight：someValue};写{fontWeight：   someValue}

不要写{text-decoration：someValue};写{textDecoration：   someValue}

因此，如果你想应用css规则“background-image”，你必须在淘汰赛的样式绑定中写下“backgroundImage”。

Docs总能做到这一点;）

使用knockout设置背景图像：适用于Chrome但不适用于其他浏览器

2 个答案: