text-indent -9999pxを使わないでテキストを画像に置換する

imgではなく背景画像として画像を表示したい場面がたまにあるので、text-indent:-9999px;を使わないでテキストを画像に置換する方法をメモしておきます。

サンプルコード

まずはtext-indent:-9999px;で実装した場合です。

HTML

<div class="sample">テキストテキスト</div>

CSS

.sample {
	width: 300px;
	height: 50px;

	/* テキストを画像に置換する */
	text-indent: -9999px;
	background: url(./image.png);
}

text-indent -9999pxでテキストを画像に置換するデモページ
こちらでも想定した表示にはできていますが、SEO的にあまりよくなかったり、パフォーマンス的にもよくはありません。
　

次にtext-indent:-9999px;を使わない方法です。

CSS

.sample {
	width: 300px;
	height: 50px;

	/* テキストを画像に置換する */
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: url(./image.png);
}

text-indent -9999pxを使わないでテキストを画像に置換するデモページ
最初のサンプルよりはいいのですが、できればimgタグを使うかWebフォントで表示するなどの方法で実装するようにして、どうしてもという時だけ使うのが望ましいです。
　

【参考サイト】

• [CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス