[CSS]box-sizingを使ったIE8+対応の画像やテキストを画像に置換するテクニック

img要素やhr要素、テキストなどをHTMLは変更せずに、スタイルシートで画像に置換するテクニックを紹介します。
img要素で配置した画像を別の画像に、hr要素を画像の区切りに、見出しなどのテキストを見出し画像に変更できます。

サイトのキャプチャ

Replace the Image in an <img> with CSS

下記は、ポイントを意訳したものです。

元のHTMLファイル

事の発端は、HTMLやJavaScriptを編集できない状態で、画像を変更する必要にせまられたものです。どのように画像を変更したか紹介します。

HTML

HTMLはこんな感じです。
.headerに子要素で画像が配置してあります。background-imageは無しです。

<head>
  <title>Really Cool Page</title>
</head>
<body>
  <div class="header">
    <img class="banner" src="http://notrealdomain1.com/banner.png">
  </div>
</body>

.header内に配置された画像をHTMLもJavaScriptも編集せずに、画像を変更してみます。

box-sizingを使う

CSSのbox-sizingを使って、この問題を解決します。
まずは、スタイルシートから。

CSS

/* All in one selector */
.banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
  width: 180px; /* 新しい画像の幅 */
  height: 236px; /* 新しい画像の高さ */
  padding-left: 180px; /* 新しい画像の幅と同じ値 */
}

box-sizingを使った画像置換のテクニックです。
変更する画像をbackground-imageとして加え、paddingで元の画像を見えなくします。

対応ブラウザ

box-sizingをサポートしているブラウザに有効なテクニックです。

  • Chrome
  • Firefox
  • Safari
  • Opera
  • IE8+

参考:box-sizeing対応ブラウザ

このテクニックはimg要素だけでなく、テキストの置換、hr要素の置換、などにも使えます。
下記デモは、上:画像置換、下:テキスト置換です。

デモのキャプチャ

デモページ

top of page

©2017 coliss