为什么不显示背景图像？

问题描述：

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

，一切工作正常。

任何想法为什么图像不显示？

我做错了什么？

你为什么要用'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; 
}

感谢post.I矩形包裹图像。任何想法如何删除它？ – Michael

你应该使用''而不是'' –

你的意思是按钮我应该使用？ – Michael

答

使用按钮背景图片不是其子 - IMG

答

在CSS .showLayers只是改变#showLayers

因为你给的造型一类叫做showLayers CSS，然后在HTML中调用一个名为showLayers的ID，该ID不存在。

答

它使您的无效文件位置。在您的第一张img标签上，您没有在第二次添加文件的位置。如果你不知道假设我们有四个目录（一，二，三，四），（三里面两台，里面一，四里一）
像：

One 
|_Two 
| |_Three 
|_Four

所以，当你在里面三你不能访问目录一个或两个或四个。为了访问目录一，你需要使用../../file_name这里用../来访问当前工作目录的父目录。

为什么不显示背景图像？

相关推荐