テキストを画像に置換えする
テキストを画像に置換えする、いわゆる「画像置換」というテクニック。
テキストをtext-indent:-9999em;などと指定して外に飛ばし、
backgroundプロパティで背景画像として画像を表示させます。
<p class="sample">紅葉画像です。</p>
.sample {
text-indent:-9999em;
background-image: url("../images/sample.gif");
background-repeat: no-repeat;
width:150px;
height:113px;
}
紅葉画像です。
ただし「画像置換」はデメリットのあるテクニックで、
- 印刷するときにデフォルトの状態では背景画像が印刷されない
- CSS表示かつ画像非表示だと情報が伝わらない
- 乱用しすぎるとペナルティの可能性も？
などのデメリットがあります。
画像置換を使う場合は、デメリットもある、
ということも頭において使用する必要があるかと思います。
