html - 显示空跨度的背景

Question

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

<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>

但是有没有另一种方法可以做到这一点，而无需在我的跨度上添加一些填充并保持我的跨度为空？

谢谢

score 22 · Accepted Answer

您可以通过使用 inline-block 但设置宽度和高度而不是使用填充来获得相同的效果。

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

此外，可能会让您感到困惑的其他事情是您在 HTML 属性中使用双引号，这会使解析器感到困惑并可能导致意外结果。我已在上面发布的代码中将它们更改为单引号，尽管没有引号也可以。

score 13 · Accepted Answer

只是不要让它为空：在里面放一个“空白”。有三种方法可以做到这一点：

将此样式添加到您的跨度：

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

怎么了：

你在你的跨度之前（或者更好的“在里面”）添加一个内容，显示 a ZERO WIDTH JOINER，并且你的跨度不再是空的

score 5 · Accepted Answer

默认情况下，跨度是内联页面元素（而不是“块”元素）。这意味着它们在页面中占用的空间不会超过分配给它们的空间——例如，如果您在其中放置文本（如您所见）。为了达到你想要的效果，你需要一点 CSS 来定义 span 的高度和宽度，但你还需要使它成为一个块元素，以便它被一致地渲染。

或者，您可以切换到 div 之类的东西，它已经是一个块元素。但是请注意，定义块元素意味着它将占用页面中的空间。如果您想要更动态的东西，请考虑使用 Javascript 或类似方法对元素进行即时操作。

~~（无论哪种方式，请忽略本页其他地方关于 HTML 属性中的单引号和双引号的建议：这完全是胡说八道）。~~

score 1 · Accepted Answer

1

try

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

于 2013-05-30T08:30:40.913 回答

score 0 · Accepted Answer

你应该设置一个width和height。
在下面的 SO-Question 中是一个提示，如何获取背景图像的大小：How do I get background-image size in jQuery

score 0 · Accepted Answer

您必须指定 awidth并height显示背景。当您在其中输入内容时，您会强制使用文本。

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

6 回答 6