Html 为什么不显示背景图像？

我使用background image属性创建了css类，并将其设置为HTML，但图像不显示：

以下是css类：

.showLayers{
    background-image: url("http://localhost/mapserver2017/stdicons/GeomindIcons/showLayers.png");
    background-repeat: no-repeat;
}

.miniToolbarContant{
    cursor:pointer;
    width:20px;
    height:20px;
    transition: transform 0.3s;
}

下面是HTML元素：

 <button type="button" class="button_air-medium">
              <img id="showLayers" class="miniToolbarContant showLayers"/></button>

一切正常

知道为什么不显示图像吗

---

我做错了什么？

在按钮上使用背景图像，而不是在其子按钮上-img

添加

背景大小

<button type="button" class="button_air-medium">
                  <img id="showLayers" class="miniToolbarContant" src="../stdicons/GeomindIcons/showLayers.png"/></button>

只需将css
.showLayers
更改为
#showLayers

因为您在CSS中为名为showLayers的类提供了样式，然后在HTML中调用了名为showLayers的ID，但该ID不存在。
这是因为您的文件位置无效。
在第一个img标签上，您没有添加文件位置，而在第二个标签上，您添加了文件位置。如果您不知道，假设我们有四个目录（一，二，三，四），（二内三，一内二，一内四）

比如：

所以，当你在三个目录内时，你不能访问目录1、目录2或目录4。
为了访问目录1，您需要使用
。/../file\u name
此处
。/
用于访问当前工作目录的父目录。
为什么要使用
img
来显示背景图像？先别胡说八道了。一个不存在的图像大小为0，所以除非你指定尺寸，否则它是不可见的。你是在live site上工作还是在localhost上工作？谢谢你的帖子。我得到了一个矩形包装图像。你知道我该如何删除它吗？你应该使用
你的意思是我应该使用的按钮？
.showLayers{
    background-image: url("http://localhost/mapserver2017/stdicons/GeomindIcons/showLayers.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

One
|_Two
| |_Three   
|_Four