html - 为什么我在按钮上得到矩形包裹图标？

Question

我创建了带有 background-image 属性的 css 类。

这是 CSS 类:

.showLayers{
    background-image: url("https://cdn0.iconfinder.com/data/icons/flat-online-2/64/layers_server_online_web_internet-128.png");
    background-repeat: no-repeat;
    background-size: 40px 40px;
}

这是我使用的另外两个 css 类:

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

.button_air-medium {
  cursor: pointer;
    height: 65px;
    width: 65px;
    background-color: #fff;
    border-radius: 36px;
    border: 0;
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

这是 HTML:

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

这是它的样子:

这里是 fiddler .

正如您在上图中看到的那样，我用矩形包裹了图标。

我的问题是如何删除包裹图标的矩形？

Answer 1

您将图像定义为 img 标记的背景图像，这没有意义。使用 div 标签代替:https://jsfiddle.net/kbz6opss/1/