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

Question

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

uli*_*a69 21 html xhtml

我有一个没有内容的跨度,但我需要一个背景图片(顺便提一下箭头).

问题是没有内容的内容没有出现背景.

我怎么解决这个问题？

Answer 1

Web*_*ter 44

设定宽度; 跨度和高度属性.

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

Run Code Online (Sandbox Code Playgroud)

没有`display:block`这不起作用. (16认同)

Answer 2

thi*_*dot 5

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

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

Answer 3

chi*_*mar 5

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

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

Run Code Online (Sandbox Code Playgroud)

输出：

归档时间：	15 年，2 月前
查看次数：	68703 次
最近记录：	7 年，1 月前