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

【问题标题】：Images appear on chrome, but not on firefox图像出现在 chrome 上，但不在 Firefox 上
【发布时间】：2016-06-10 19:38:12
【问题描述】：

图像在 Chrome 和 Safari 上显示正常，但在 Firefox 上却不显示！非常感谢帮助

这是我的代码：

HTML：

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

CSS：

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

【问题讨论】：

【解决方案1】：

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

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

不知何故，它也适用于普通元素，但如您所见，仅适用于 Chrome 和 Safari 等 WebKit 浏览器。

但仅适用于 chrome 和 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>

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

【讨论】：