Question

我有一个没有内容的跨度，但我需要一个背景图片（顺便提一下箭头）。

问题是在没有内容的情况下，背景不会出现。

我该如何解决这个问题？

Answer 1

设定宽度;和跨度的高度属性。

<span style="width: 90px; height: 90px; background-image: url('bg.jpg'); display:block" />

Answer 2

设置style="padding-left:20px"。

或设置display:block; width:20px; height:20px。

Answer 3

尝试在内部放置一个不间断的空间，即：

<span>&nbsp;</span>

Answer 4

如果将其设置为阻止，它将自动置于其他元素下，这可能会导致yyour设计出现问题。为了防止这种情况，您可以通过设置display:inline-block来使用内联和阻塞的优点，这将像内联一样放置，您将被允许给它高度和宽度。 Ps：这对ie7不起作用。

Answer 5

您不需要使用 display：block 。您可以使用位置：绝对。将宽度和高度设置为100％。它将采用图像的宽度和高度。因此，请根据需要调整图像大小。并且图像将垂直于文本居中对齐。下面是一个例子。在此我使用了20X20像素的图像。

<html>
<style>
.spanImage{
    background-image: url('settings.png');
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>
<body>
<div>This is a sample demo.<span class="spanImage"></span></div>
</body>
</html>

输出：

Answer 6

你可以这样做：

<span style="display:block;width:arrow_width;height:arrow_height;background-image:url('image_name');">&nbsp;</span>

跨度与背景图像，没有内容

6 个答案: