图像出现在chrome上，但不出现在Firefox上

Question

图片在Chrome和Safari上显示正常，但它们不会出现在Firefox上！非常感谢帮助

这是我的代码：

HTML：

<div class="clearearlanding"></div>

CSS：

div.clearearlanding {
  content: url('/images/clearearlandingpage.png');
  margin-left: -70px;
  width: 120%;
}

Answer 1

content仅应用于伪元素（:before和:after）。

  

它只能与伪元素一起使用：after和：before。
  （根据CSS-Tricks）

不知何故，它也适用于普通元素，但仅适用于Chrome和Safari等WebKit浏览器，正如您所注意到的那样。

  

但仅适用于chromekit和safari等webkit浏览器   （根据George Nava on CSS-Tricks）

解决方案

一些简单的解决方案：

使用:before：

<强> CSS：

div.clearearlanding:before {
  content: url('/images/clearearlandingpage.png');
  margin-left: -70px;
  width: 120%;
}

使用img标记（尽管您可能有理由不使用它）：

<强> CSS：

div.clearearlanding > img {
  margin-left: -70px;
  width: 120%;
}

<强> HTML：

<div class="clearearlanding">
  <img src="https://placeholdit.imgix.net/~text?txtsize=48&txt=512%C3%97256&w=512&h=256" />
</div>

或在background-image或其.clearearlanding元素上使用:before。