背景图像不会显示

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

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

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

Notepad ++没有显示这些字符，也没有显示记事本。一个快速的谷歌发现这个Stack post给出了解释（这是我的头脑）。

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

希望这对未来的其他人有所帮助，因为我真的把头发拉了出来。

感谢所有帮助过的人！

Answer 2

好吧，我不会改变你的代码，它可以运行...... #no选择器的某些东西，可能它不是唯一的，或者是the priority of your selectors

的错误

#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>