为什么CSS内容图片没有显示？

Question

请考虑以下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 可以正常渲染上面提供的 fiddle，但 Firefox（我正在使用）无法正常渲染。如果我在 CSS 中的类名中添加 :before 或 :after，图片就会在 Firefox 中显示。请问有人可以解释一下为什么吗？

编辑：我使用了错误的结构来放置图片。在我的上下文环境中，我应该使用 <img> HTML 标签。CSS 的 content 结构使用 :before 和/或 after 来放置内容，包括图片，但我知道这些是用于特定情况下的。我只想显示一个标志。

- Steve Cooke

---

小提琴对我有效。 - vaultah

内容：''；不要使用:before或:after。我认为你应该使用background-image。 - Vitorino fernandes

首先，我不知道你提供的那个小提琴为什么适用于Vaultah和Zafer Ayan？？？？？ - Rohit Kumar

通常我们必须总是使用:before或:after.. 问题在评论中解决 ;) - Rohit Kumar

@SteveCooke 你说得对，这与clearfix无关：原因是按定义，content属性与:before和:after伪元素一起使用，用于插入生成的内容。（这就是为什么FF不支持它..但chrome支持:) - maioman

Answer 1

该属性content与:before和:after伪元素一起使用，用于在文档中生成内容。- W3C

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

- Stickers

---

是的 - 根据我的问题下面的评论，这是正确的答案。我不知道它是否提供了对我的问题的完全理解 - 更多信息请参见此处。 - Steve Cooke

我不知道你的其他问题是什么，你能否澄清一下？如果与之前的问题不太相关，请发布一个新的问题。 - Stickers