css - 没有文字的CSS背景图像？

Question

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

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

这就是我使用它的方式：

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

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

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

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

谢谢！

score 9 · Accepted Answer

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

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

score 2 · Accepted Answer

2

即使使用display:block（这是强制性的），您也需要指定跨度的高度。

于 2012-08-06T10:46:29.947 回答

score 2 · Accepted Answer

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

但是您可以拥有 span 的背景图像，如下所示。

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

0

这应该工作：
<span class="info"> </span>

于 2012-08-06T10:48:03.487 回答

5 回答 5