Image Replacement （背景画像置換）ネタ再び。我ながらしつこいネタだけどキニシナーイ。とりあえず今回は、:before 疑似要素を使って、テキストを画像に置換してみるっす。
残念ながら、IE は:before 疑似要素をサポートしていないんだけど、この方法による利点は画像オフ CSS オンの状態でも問題なくテキストを表示してくれるってこと。おそらく IE7 ではサポートされると思うんで、IE7 がそこそこ広まったうえで、それ以前の IE をバッサリ切り捨てる潔さがあれば、意外と使える方法かもしれない。
:before 疑似要素によるImage Replacement の仕組み
:before 疑似要素と content プロパティを使うことによって、当該要素の前に生成内容を挿入することが可能になる。今回のImage Replacement （背景画像置換）の仕組みとしては、テキストの前に画像を挿入し、はみ出したテキストを不可視にすることによって画像のみを表示させるって感じ。当然、画像をオフにした場合は、はみ出して不可視になっていたテキストが表示されることになる。
実際のやり方
サンプルとして下記のソースを使い、Lucky bag::blog の文字を画像で表示してみる。
<h4>Lucky bag::blog</h4>まず、h4 に対して :before 疑似要素を使って画像を要素の前に生成する。
h4:before {
content: url("banner.png");
}
さらに、その部分をブロック化させる指定を追加することによって、テキストが画像の下に回り込む。
h4:before {
content: url("banner.png");
display: block;
}
最後に h4 の高さ（＝画像の高さ）を指定し、領域からはみ出したテキストを隠すことによって完成。
h4 {
height: 110px;
overflow: hidden;
}
完成サンプル。IE などの :before 疑似要素をサポートしていないブラウザ、もしくは、画像オフ CSS オンの状態で閲覧すると、元のテキストのみで表示される。
Comments