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×0px，因此实际上并没有加载。

我尝试了很多内容，包括background-size: auto在图片上，并在包含overflow: 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 */
}

background-image没有高度或宽度？

2 个答案: