圖像顯示在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瀏覽器中有效。

但僅適用於chrome和safari等webkit瀏覽器。
（根據CSS技巧的George Nava ）

---

解決方案

一些簡單的解決方案：

使用: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 。