テキストを画像に置換えする

テキストを画像に置換えする、いわゆる「画像置換」というテクニック。
テキストを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表示かつ画像非表示だと情報が伝わらない
  • 乱用しすぎるとペナルティの可能性も?

などのデメリットがあります。
画像置換を使う場合は、デメリットもある、
ということも頭において使用する必要があるかと思います。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る