2

这是我尝试使用的 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>
4

4 回答 4

7

如果图标很小并且没有在其他任何地方重复使用，只需将其设置为 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 */
}

这样干净一点。

于 2012-04-06T23:58:43.907 回答
2

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

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

尝试这样的事情，假设图像是 16 像素 x 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 之类的东西。

无论哪种情况，您都可能希望将直接图像 url 更改为相对 url，然后再期望此页面在生产环境中工作。

于 2012-04-06T23:45:45.577 回答
0

我很确定您需要给跨度一些width. 默认情况下它没有，所以当然不会看到背景图像。

于 2012-04-06T23:38:23.580 回答
0

首先，如果你没有使用 sass 和 less，那么你的样式表是错误的。接下来，给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;
}
于 2012-04-06T23:51:29.730 回答