html - css 経由で img の内容を置き換える

Question

私はこの画像タグを持っています：

<img src="http://placehold.it/200x200"/>

css を介して画像を置き換える必要があるため (html を編集できないため)、この css を使用します。

img {
 content: url('http://lorempixel.com/200/200');
}

クロムではうまく機能していますが、Firefoxでは機能していません。つまり、理由は何ですか?

Answer 1

HTML

<img src="http://placehold.it/200x200"/>

CSS

img{
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://lorempixel.com/200/200) no-repeat;
  width: 200px; /* Width of new image */
  height: 200px; /* Height of new image */
  padding-left: 200px; /* Equal to width of new image */
  }