我使用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>
一切正常。
知道图片没有显示的原因吗?
我做错了什么?
答案 0 :(得分:1)
添加background-size
.showLayers{
background-image: url("http://localhost/mapserver2017/stdicons/GeomindIcons/showLayers.png");
background-repeat: no-repeat;
background-size: 20px 20px;
}
答案 1 :(得分:0)
只需将css .showLayers
更改为#showLayers
因为您在CSS中为一个名为showLayers的类提供样式,然后在HTML中调用了一个名为showLayers的ID,该ID不存在。
答案 2 :(得分:0)
因为您的文件位置无效。 在你的第一个img标签上你没有添加文件位置,而在你做的第二个。如果您不知道我们有四个目录(一,二,三,四),(三个内部两个,两个内部一个,四个内部一个) 喜欢:
One
|_Two
| |_Three
|_Four
所以,当你进入Three时,你无法访问目录一,二或四。
要访问目录One,您需要使用../../file_name
../
来访问当前工作目录的父目录。
答案 3 :(得分:-1)
使用按钮上的背景图像而不是其子项 - img