为什么我在按钮上获得矩形包装图标？

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/

Answer 2

这是由<img>标记引起的，尝试在使用背景图片时不使用<img>。

Answer 3

css很奇怪，如果你使用img标签你想使用src属性

＆＃13;

＆＃13;

<img id="showLayers"src="https://cdn0.iconfinder.com/data/icons/flat-online-2/64/layers_server_online_web_internet-128.png" class="miniToolbarContant showLayers"/>

＆＃13;

＆＃13;

＆＃13; 并从css中删除背景网址， 否则它会创建那个边界，无论你做什么（据我所知）。