Question

这是我正在尝试使用的HTML：

<h1>Order Not Paid<span class="not-paid"></span></h1>

当然，如果有更好的方法请说出来。

目前由于跨度内没有文字，浏览器似乎忽略了这个标签。在检查时，Firebug显示为灰色。

当我在跨度中放置文字时，图标会正确显示。

我可以申请哪种CSS规则？这是我到目前为止所做的（这是SASS，但很容易掌握）：

h1 {
    font-size: 24px;

    span.not-paid {
        background-image: url('/Public/images/remove.png');
        background-repeat: no-repeat;
    }
}

我希望图标出现在跨度的位置。

或者，做这样的事情是否犹豫不决？如果是这样，我可以解决这个问题，因为它在IE8和现代浏览器上看起来很不错。

<h1>Order Not Paid <img src="@Url.Content("~/Public/images/remove.png")" alt="" /></h1>

Answer 1

如果图标很小而在其他地方没有重复使用，只需将其设置为h1的一部分。

HTML：

<h1 class="not-paid">Order Not Paid</h1>

CSS：

h1.not-paid {
  font-size: 24px;
  padding:0 16px 0 0; /* whatever the dimensions the image needs */
  background-image: url('/Public/images/remove.png') no-repeat right center; /* Position left/right/whatever */
}

这样一点清洁。

Answer 2

背景图片没有显示，因为跨度没有宽度，因此没有显示任何背景。

另外，您提供的代码段不是有效的CSS。

尝试这样的事情，假设图像是16像素×16像素：

h1 {
  font-size: 24px;
}

span.not-paid {
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    background-image: url('/Public/images/remove.png');
    background-repeat: no-repeat;
}

display: inline-block;是为了使宽度适用。 vertical-align是将图像居中放在线条的中间位置。

所有这些说明，<img>标记解决方案也可以工作，但它不能很好地扩展到很多类似的图像。基于CSS的解决方案使得以后更容易切换到css spriting之类的东西。

在任何一种情况下，您可能希望在希望此页面在生产环境中工作之前，将您的直接图像网址更改为相对网址。

Answer 3

我非常确定你需要给一些width。默认情况下它没有，所以当然不会看到背景图像。

Answer 4

首先，如果你没有使用sass，那么你的样式表就错了。接下来，给inner-block跨度和图像高度和宽度。

h1 {
    font- size: 24px;
}

h1 span.not-paid {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-image: url('/Public/images/remove.png');
    background-repeat: no-repeat;
}

使用跨度在H1标签的文本旁边放置一个图标

4 个答案: