Question

我有一个简单的信息图标，我想将其显示为css背景图像。这就是我试过的：

span.info {
    background-image: url(info.png);
    float: right;
    width: 17px;
    display: block;
}

这就是我使用它的方式：

<span class="info"></span>

这不显示图像。我必须有一些文字，如下：

<span class="info">test</span>

这会显示带有文字的图像，但我希望它没有任何文字，只有图像。怎么了？

谢谢！

Answer 1

你必须在你的风格中设置一个高度。

span.info {
    background-image: url(info.png);
    float: right;
    width: 17px;
    height: 17px;
    display: block;
}

Answer 2

即使使用display:block（必须），您也需要指定范围的高度。

Answer 3

如果您只想要图片，请不要直接使用<img>。它可以让您更好地控制图像。

但是你可以得到跨度的背景图像如下。

<span>不是<div>之类的块元素。所以你必须设置它的"display: block"。然后为跨度指定一些高度和宽度。

Answer 4

如果没有内容，则跨度不会显示任何内容，除非您在CSS中指定高度（和宽度）...

span.info {
    height: 17px;
    ...
}

Answer 5

这应该有效：
<span class="info"> </span>