ボタンに四角形のラップアイコンが表示されるのはなぜですか？

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; 
} 

そして、ここでは、私が使用する2つの他の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属性

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

を使用すると、CSSから他 を背景URLを削除する、奇妙です私が知る限り）。