css - background-img 没有高度或宽度？

Question

我正在使用 CSS background-img。路径正确，但图像没有宽度或高度。

 HTML: 
 <button id="view-switcher-current" class="btn btn-small dropdown-toggle" data-toggle="dropdown">
 <i class="icon-switcher-network"></i> Network
 </button>
 CSS:
 i.icon-switcher-network  {
   background-image: url('../img/view-network.png');
 }

通过检查元素并点击链接，我可以看到路径是正确的，但我也可以看到图像的尺寸为 0px x 0px，因此它实际上并没有被加载。

我已经尝试了很多东西，包括background-size: auto在图像上和在 containsoverflow: hidden上的设置button，但似乎没有任何区别。

任何人都可以提出任何建议吗？

Answer 1

<i></i>您的标签中没有任何内容。

<i></i>标签是内联的，因此它们的尺寸取决于它们的内容。如果您使用块级元素（例如 div）并为其提供一些尺寸，那么您将看到您的背景图像。

Answer 2

你的标签里面没有任何东西，而且标签是一个内联元素，所以试试这个

i.icon-switcher-network  {
  background-image: url('../img/view-network.png');
  width: 16px;
  height: 16px;
  display: inline-block; /* <------ Add this here */
}