背景图像未显示在跨度标记中答案

【问题标题】：Background image not showing up in span tag背景图像未显示在跨度标记中
【发布时间】：2017-12-26 18:44:02
【问题描述】：

我在 windows 7 上的最新 FF 中显示背景图像的 span 标签有问题。它似乎在早期的 FF、Chrome、Safari 和 IE 中工作并显示一切正常，但手持设备和 Windows 7 似乎失败了。

对不起，如果这看起来含糊不清，我只是想不通，这些图像最初是没有指定高度的 png，我将它们制作为 gif 并应用了高度。

<span class="design">Design Viz</span>
<style>
.design  {
    background:url(_includes/images/agenda-design.gif) no-repeat top left;
    display: inline-block;
    height: 17px;
    padding-left:25px;
}
</style>

【问题讨论】：

只是一个快速的猜测，但你确实需要将你的 url 放在 '' 中（所以它是 url('_includes/images/agenda-design.gif')
我做了，我把它删掉了，然后作为它的客户发布在这里。

标签： html css

【解决方案1】：

background-image CSS 属性仅将图像作为背景。对象的宽度和高度始终由通过 CSS/内联样式的静态设置或其中显示的内容的实际大小来定义。在您的情况下，由于您没有在标签之间添加任何内容，因此其 x/y 尺寸将为 0，但背景没有错误。它就在那里，除非您（以某种方式）定义元素的大小，否则您看不到它。

<span class="design">Design Viz</span>
.design  {
padding-left:25px;
background:url(_includes/images/agenda-design.gif) no-repeat top left;
display: inline-block;
height: 17px;
width: 50px;
}

其中 50 可以是适合您的情况的任何有用值。

【讨论】：

我认为标签之间有内容，“Design Viz”？
Span 的高度和显示是我努力解决的关键因素。

【解决方案2】：

显示：内联块； IE7 不支持。您可以通过添加来修复它：

.design  {
    padding-left:25px;
    background:url(_includes/images/agenda-design.gif) no-repeat top left;
    display: inline-block;
    height: 17px;
    width: 50px;
    zoom: 1;
    *display:inline;
}

【讨论】：

【解决方案3】：

如果声明背景图像，则不能设置属性no-repeat top left。在background-image 中，您只能设置指向您的图片的链接。

或者你可以像这样使用background：

background: url(...) no-repeat top left

【讨论】：

【解决方案4】：

使用像

这样的填充

 padding-left:25px;
    padding-top: 6px;
    padding-bottom: 10px;
    padding-right: 5px;

【讨论】：

【解决方案5】：

将 width: 17px 也添加到您的 css 样式（或任何宽度）

【讨论】：

但是该类应用于多个长度各不相同的单词，因此我无法设置特定的宽度...
不幸的是，您必须在跨度内有一个宽度或其他东西来赋予它宽度，例如透明的 gif。