没有文字的CSS背景图片？

我有一个简单的信息图标，我想把它显示为css背景图片。这是我的尝试：没有文字的CSS背景图片？

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

这是我如何使用它：

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

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

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

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

谢谢！

完全无关你的问题，但是因为你已经有了'float：right'，所以你不需要'display：block'。即使将“display：inline”应用于它们，浮动元素也会自动视为块级元素。 – 2012-08-06 10:51:41

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

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

2012-08-06 10:46:27 DanielB

好的，那总是显示图像。图像比17px大，有没有办法缩放它？ – user1540714 2012-08-06 10:49:59

@ user1540714：如果图像高于17px，则将''的高度设置为图像的高度。 – 2012-08-06 10:52:29

我使用了background-size：17px，这也适用 – user1540714 2012-08-06 10:54:10

即使display:block（这是必须的），你需要指定范围的高度。

2012-08-06 10:46:29 darma

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

但是你可以有span的背景图像如下。

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

2012-08-06 10:47:07 Narendra

没有内容的跨度不会显示任何东西，除非你指定的CSS高度（和宽度）...

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

2012-08-06 10:47:16 freefaller

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

2012-08-06 10:48:03 orhanhenrik

回答