为什么不显示背景图像?

时间:2017-08-13 12:23:48

标签: html css

我使用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>

一切正常。

知道图片没有显示的原因吗?

我做错了什么?

4 个答案:

答案 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