h1要素などの背景にcssで画像を指定してh1のテキストを隠すための手法としてtext-indentが使われます。
かつて多く取られた方法は−9999pxの位置まで飛ばす方法でしたが、パフォーマンスの問題やサーチエンジン対策としてダークな部分が残るなどの問題がありました。
HTMLコード
<h1>美しい日本語</h1>
CSSコード
h1{ width:200px; height:100px; background:url(logo.png) no-repeat; text-indent: -9999px; }
考え方は同じようなものですが、どこか遠くへ飛ばすのではなく、 text-indent: 100%としてぎりぎり見えなくしています。
さらに、そのままでは行が折り返されてしまいますので、white-space: nowrapで折り返しを禁止しています。
それでも状況によっては少し文字が見えたりしますので、overflow: hiddenであふれ出したものは見えないようにしています。
HTMLコード
<h1>美しい日本語</h1>
CSSコード
h1{ width:200px; height:100px; background:url(logo.png) no-repeat; text-indent: 100%; white-space: nowrap; overflow: hidden; }
サーチエンジン対策第一の場合はやっぱりテキストは隠さない方がベターだと思います。