爲什麼不顯示背景圖像？

-1

我創建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>

但是圖像從未顯示。

而如果我更改HTML上面這樣的：

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

，一切工作正常。

任何想法爲什麼圖像不顯示？

我做錯了什麼？

來源

2017-08-13 Michael

你爲什麼要用'img'來顯示_background_圖像？首先停止這個廢話。 – CBroe

不敏感圖像的大小爲0，因此除非您指定尺寸，否則它將不可見。 –

你在現場或本地主機上工作嗎？ –

添加background-size

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

來源

2017-08-13 12:34:45

感謝post.I矩形包裹圖像。任何想法如何刪除它？ – Michael

你應該使用''而不是'' –