Html 显示空跨度的背景

假设我有一个跨度，我设置了一个图像作为跨度的背景，如下所示：

<span style="background:url("my_image.png") no-repeat;"></span>

正如你在上面看到的，我的跨度是空的。如果我在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>

一些内容。。。

我可以看到跨度的背景图像，没有问题。但是如果我将跨度留空，我就看不到背景图像。我想我可以通过在跨度中添加一些填充来解决这个问题，比如：

<span style="background:url("my_image.png") no-repeat;">Some content...</span>

<span style="background:url("my_image.png") no-repeat;padding:20px;"></span>

但是，有没有其他方法可以做到这一点，而无需在跨度中添加一些填充，并保持跨度为空

---

谢谢

使用内联块，但设置宽度和高度，而不是使用填充，可以获得相同的效果

<span style="background:url('my_image.png') no-repeat; display: inline-block; width: 40px; height: 40px;"></span>

---

另外，可能会让您绊倒的另一件事是，您在HTML属性中使用了双引号，这将混淆解析器，并可能导致意外的结果。在我上面发布的代码中，我已经将它们改为单引号，尽管没有引号也可以。

您必须指定

宽度和
高度来显示背景。当你在里面输入一些东西时，你用文本强制两者

<span style="background:url("my_image.png") no-repeat; width: 50px; height: 25px"></span>

默认情况下，跨距是内联页面元素（而不是“块”元素）。这意味着它们不会在页面中占用比分配给它们更多的空间，例如，如果您在其中放置文本（如您所发现的）。为了实现您想要的，您需要一点CSS来定义跨度的高度和宽度，但是您还需要将其设置为块元素，以便一致地呈现

或者，您可以切换到类似div的东西，它已经是块元素了。但是请注意，定义块元素意味着它将占用页面中的空间。如果你想得到更动态的东西，可以考虑用JavaScript或类似的方法对元素进行操作。
（无论如何，忽略本页其他地方关于HTML属性中单引号和双引号的建议：这完全是胡说八道）。
试试看

<span style="background:url('my_image.png') no-repeat; display:block; height: 40px;"></span>

您应该设置
宽度
和
高度


下面的问题是一个技巧，如何获得背景图像的大小：
不要让它变空：在里面放一个“空白”。有三种方法可以做到这一点：

简单的
space
并添加样式
空白：pre到它

或
&160

非plus ultra是，让css为您完成以下任务：

将此样式添加到您的范围：

 :before {
    content: "\200D";
    display:inline;
 }  

发生了什么：

您可以在跨度之前（或者更好地说是在“前面-里面”）添加一个内容，该内容显示一个，并且跨度不是空的enymore
元素需要具有一定的宽度和高度，以便背景可见。你想干什么？跨度是否有内容？将不显示空跨度。添加一个填充、宽度/高度或其他东西来显示一个空的跨度…这根本不是胡说八道。OP在HTML属性的值内使用双引号，这将导致值过早终止和无效HTML。如果我有
，title属性的值将是“我的名字是”。因此OP的样式属性最终将是“background:url”（），这显然是错误的。完全正确，我的错。我想在属性中使用双引号/单引号，句号（即不在属性内）。抱歉。