html - イメージタグのイメージを CSS に置き換えることはできますか?

Question

CSS でタグのsrc属性を変更できないことはわかっています。<img>しかし、src 属性から画像を非表示<img>にし、代わりにタグに背景画像を設定する可能性はありますか?

私はそのようなことを考えました：パディング/テキストインテントなどで実際の画像を移動し、その後imgタグの背景画像を設定して、別の画像のように見せます。

Js は、既存のページをテンプレート化するためのものであるため、オプションではありません。

Answer 1

これを行うには、img src を 1x1 の空白の gif 画像にポイントします。

これは、別の div を追加したくない場合に必要です。これは、欠落している画像と空の src 属性の処理がすべてのブラウザーで異なるためです。（たとえば、画像が欠落している場合、クロムは画像の周りに境界線を追加します。）

次に、 background-image プロパティを変更するだけで画像を変更できます。

アップデート

そのための画像スプライトを作成し、background-position プロパティを変更してアニメーション化することもできます。例えば：

2 つの 50px 幅の画像があり、その要素がホバーされたときに 2 番目の画像を表示したいとします。それらを 1 つの画像にマージするだけで、上記の css でうまくいきます。

img { background: url(sprite.jpg) 0 0 no-repeat; }
img:hover { background: url(sprite.jpg) -50px 0 no-repeat; }