Html 具有背景图像且无内容的跨度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4550069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Span with background image and no content
提问by ulima69
I have a span that has no content, but i need a background image (an arrow, by the way).
我有一个没有内容的跨度，但我需要一个背景图像（顺便说一下，一个箭头）。
The problem is without no content inside span the background doesnt appear.
问题是跨度内没有内容，背景不会出现。
How can i solve this?
我该如何解决这个问题？
回答by WebMonster
Set the width; and height properties of the span.
设置宽度；和跨度的高度属性。
<span style="width: 90px; height: 90px; background-image: url('bg.jpg'); display:block" />
回答by thirtydot
Set style="padding-left:20px".
设置style="padding-left:20px"。
or set display:block; width:20px; height:20px.
或设置display:block; width:20px; height:20px。
回答by JYelton
Try putting a nonbreaking space inside, i.e.:
尝试在里面放置一个不间断的空间，即：
<span> </span>
回答by chindirala sampath kumar
You don't need to use display:block. You can use position: absolute. Set width and height as 100%. It will take the image width and height. So resize the image as per your need. And also image will be vertically center aligned to the text. Below is an example. In this I have used 20X20 px image.
您不需要使用display:block。您可以使用position: absolute。将宽度和高度设置为 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>
Output:
输出：
回答by nikoss
if you set it to block it will automatically place under other element and this can cause some problems in yyour design.
To prevent this you can use advantages of inline and block together by setting display:inline-blockthis will place like inline and you will be allowed to give height and width to it.
Ps: This doesnt work on ie7.
如果您将其设置为阻止，它将自动放置在其他元素下，这可能会导致您的设计出现一些问题。为了防止这种情况，您可以通过设置display:inline-blockthis will place like inline来使用 inline 和 block 的优点，您将被允许为其提供高度和宽度。Ps：这不适用于ie7。
回答by Will
You could do something like this:
你可以这样做：
<span style="display:block;width:arrow_width;height:arrow_height;background-image:url('image_name');"> </span>
