[CSS]box-sizingを使ったIE8+対応の画像やテキストを画像に置換するテクニック
Post on:2013年5月28日
sponsors
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+
このテクニックはimg要素だけでなく、テキストの置換、hr要素の置換、などにも使えます。
下記デモは、上：画像置換、下：テキスト置換です。
sponsors
