为什么CSS内容图像不显示?

时间:2015-07-26 11:24:27

标签: html css

考虑这个html:

<div class="logo-b"></div>

这个CSS:

div.logo-b {
    content: url(http://placehold.it/350x150);
    height: 150px;
    border: 1px solid darkred;
}

我正在尝试使用CSS显示图像。图像未显示。请查看此jsfiddle以了解我的意思。我错过了什么?

编辑:看起来Chrome渲染了小提琴,因为我提供的很好,但Firefox(我使用)没有。如果我将:before:after添加到我的CSS中的类名,则图像会显示在Firefox中。有人可以解释为什么会这么好吗?

编辑:我使用错误的构造将图像放在我的页面上。在我正在做的事情的上下文中,我应该使用<img> html标记。 CSS content构造使用:before和/或after来放置内容,包括图像,但据我所知,这些内容在特定的上下文中使用。我只是想展示一个标志。

1 个答案:

答案 0 :(得分:2)

  

此属性:before:after和{{1}}一起使用   用于生成文档内容的伪元素。 - W3C

我认为Firefox中的行为是正确的。