Question

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

一切正常。

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

我做错了什么？

Answer 1

添加background-size

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

Answer 2

只需将css .showLayers更改为#showLayers

即可

因为您在CSS中为一个名为showLayers的类提供样式，然后在HTML中调用了一个名为showLayers的ID，该ID不存在。

Answer 3

因为您的文件位置无效。在你的第一个img标签上你没有添加文件位置，而在你做的第二个。如果您不知道我们有四个目录（一，二，三，四），（三个内部两个，两个内部一个，四个内部一个）喜欢：

One
|_Two
| |_Three   
|_Four

所以，当你进入Three时，你无法访问目录一，二或四。要访问目录One，您需要使用../../file_name ../来访问当前工作目录的父目录。

Answer 4

使用按钮上的背景图像而不是其子项 - img

为什么不显示背景图像？

4 个答案: