显示空跨度的背景

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>

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

谢谢

Answer 1

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

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

此外,还有一些可能让你感到震惊的是你在HTML属性中使用双引号,这会使解析器混淆并导致意外结果.我在上面发布的代码中将它们更改为单引号,尽管没有引号也可以.

Answer 2

只是不要把它弄空:把一个'空白'放在里面.有三种方法可以做到:

1. 简单space并添加样式 white-space: pre;到它

2. 不间断的空间  或 

3. 非加超,让css为你做的伎俩:

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

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

怎么了:

你在你的跨度之前添加一个内容(或者更好地"在前面"),显示一个内容ZERO WIDTH JOINER,你的跨度不是空的enymore

Answer 3

默认情况下,跨度是内联页面元素(而不是"块"元素).这意味着它们不会占用页面中的空间而不是分配给它们的空间 - 例如,如果您在其中放置文本(如您所见).要实现您想要的效果,您需要一个CSS来定义跨度的高度和宽度,但您还需要使其成为块元素,以便一致地呈现它.

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

(无论哪种方式,忽略本页其他地方关于HTML属性中单引号和双引号的建议:这完全是胡说八道).