背景图像不会显示

Question

我有一个 CSS background-image 问题我无法弄清楚。

这里是：

CSS

#yes {
   background-image:url("../tick.png");
   background-repeat: no-repeat;
   height: 16px;
   width: 16px;
}

#no {
   background-image:url("../cross.png");
   background-repeat: no-repeat;
   height: 16px;
   width: 16px;
}

HTML

    <td id="yes"></td>
    <td>Item 1</td>
    <td id="no"></td>
    <td>Item 2</td>

结果

无论我做什么，我都无法使用 #no id。

我可以通过网络浏览器浏览到 img 并且它有效。
我已将 cross.png 替换为 tick.png（我知道它有效），但它仍然无效。
我试过使用完全限定的路径 background-image:url("http://.../cross.png"); 但仍然不满意。

我不知道还有什么问题可以解决？

我知道我可以使用 <img...（效果很好）但我不想被打败。

谁能把我从痛苦中解救出来！？

非常感谢。

Answer 1

好吧，我没有对你的代码做太多改动，而且它可以工作...... #no 选择器有些问题，也许它不是唯一的，或者 the priority of your selectors[=14= 有问题]

#yes,
#no {
  display: block;
  background-repeat: no-repeat;
  height: 20px;
  width: 20px;
}
#yes {
  background-image: url("http://upload.wikimedia.org/wikipedia/commons/5/50/Yes_Check_Circle.svg");
}
#no {
  background-image: url("http://upload.wikimedia.org/wikipedia/commons/f/f5/No_Cross.svg");
}

<table>
  <tr>
    <td id="yes"></td>
    <td>Item 1</td>
    <td id="no"></td>
    <td>Item 2</td>
  </tr>
</table>

Answer 2

好的，所以在JBaczuk的帮助下，他识别出了CSS文件中包含的一些奇怪的字符。

这会阻止 CSS 文件的其余部分被解析。

Notepad++ 没有显示这些字符，Notepad 也没有。快速 Google 找到了这个 Stack post，它给出了解释（这是我无法理解的）。

为了解决我的问题，我只是删除了 #yes 和 #no id 并重新创建了它们（这次使用类并且它似乎已经解决了我的问题。

希望这对以后的其他人有所帮助，因为我确实在拔头发。

感谢所有帮助过的人！

背景图像不会显示

background-image won't display

css

background-image