假设我有一个跨度，我将图像设置为跨度的背景，如下所示：
<span style="background:url("my_image.png") no-repeat;"></span>
如上所示，我的范围是空的。如果我在我的范围内添加一些内容，如：
<span style="background:url("my_image.png") no-repeat;">Some content...</span>
我可以看到跨度的背景图像没有问题。但如果我将跨度留空，我看不到背景图像。我想我可以通过在我的跨度中添加一些填充来解决这个问题，如：
<span style="background:url("my_image.png") no-repeat;padding:20px;"></span>
但是有没有其他方法可以做到这一点而不在我的跨度中添加一些填充并保持我的跨度为空？
谢谢
答案 0 :(得分：13)
使用内联块但设置宽度和高度而不是使用填充，可以获得相同的效果。
<span style="background:url('my_image.png') no-repeat; display: inline-block; width: 40px; height: 40px;"></span>
另外，可能会让你感到震惊的是你在HTML属性中使用双引号，这会使解析器混淆并导致意外结果。我在上面发布的代码中将它们更改为单引号，尽管没有引号也可以。但/ / p>
答案 1 :(得分：7)
只是不要把它弄空：把一个'空白'放在里面。有三种方法可以做到：
简单space并向其添加样式white-space: pre;
Non-breaking Space 或 
non plus ultra是让css为你做的伎俩：
将此样式添加到您的范围：
:before {
content: "\200D";
display:inline;
}
会发生什么：
您在跨度之前添加内容（或更好地“在内部”），显示ZERO WIDTH JOINER，并且您的范围不是空的enymore
答案 2 :(得分：5)
默认情况下，spans是内联页面元素（而不是“block”元素）。这意味着它们不会占用页面中的空间而不是分配给它们的空间 - 例如，如果您在其中放置文本（如您所见）。为了达到你想要的效果，你需要一个小的CSS来定义跨度的高度和宽度，但你还需要使它成为一个块元素，以便它一致地呈现。
或者，您可以切换到div之类的东西，它已经是一个块元素。但请注意，定义块元素意味着将占用页面空间。如果你想要更动态的东西，可以考虑使用Javascript或类似方法对元素进行一些动态操作。
（无论哪种方式，忽略本页其他地方关于HTML属性中单引号和双引号的建议：这完全是胡说八道。）
答案 3 :(得分：0)
您必须指定width和height才能显示背景。当你在其中输入内容时，你可以强制使用文本。
<span style="background:url("my_image.png") no-repeat; width: 50px; height: 25px"></span>
答案 4 :(得分：0)
试
<span style="background:url('my_image.png') no-repeat; display:block; height: 40px;"></span>
答案 5 :(得分：0)
您应该设置width和height
在下面的SO-Question是一个提示，如何获得背景图像的大小：How do I get background-image size in jQuery