画像の差し替えをCSSで行う方法

読了目安時間は約 3 分です。

WordPressで画像を差し替える必要があって、CSSで簡単に対応できないかと思って調べたことを備忘録的に記事にいたします。

なるべくCSSだけで画像を置き換えたかったのですが、コーディングはCSSまでしかできません！という方にはオススメです。

以下は「○○○○○○.jpg」という画像を「△△△△△△.jp」に置き換える例です。

HTML

<div class="sample">
<img src="https://○○○○○○.jpg">
</div>

CSS

.sample img {
  display: none;
  width: 400px;
  height: 300px;
}

.sample {
  background-image: url("https://△△△△△△.jpg");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  background-size:contain;
}

img {display: none;}で差し替え前の画像を消し、background-imageで背景画像として置き換えます。
background-repeat: no-repeat;で画像をひとつだけ表示させます。
widthやheightでサイズ指定しないとうまく表示できません。

差し替えだけでなく、単に画像を配置したい場合でも使えます。:hoverを使ってマウスホバーで変えることもできます。

今まで画像を配置できなかったところに差し込んだり、いろいろ応用できますので、ぜひお試しください。