[解決済み] cssでテキストを隠す

質問

私のhtmlには、このようなタグがあります。

<h1>My Website Title Here</h1>

cssを使用して、テキストを実際のロゴに置き換えたいと思います。タグのサイズを変更し、cssで背景画像を入れることで、問題なくロゴを表示することができました。しかし、テキストを削除する方法がわかりません。以前、基本的にテキストを画面外に押し出すことで実現したのを見たことがあります。問題は、それを見た場所を覚えていないことです。

解決方法は？

これは一つの方法です。

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width: 600px;
    white-space: nowrap;            /* because only the first line is indented */
}

h1 a {
    outline: none;  /* prevents dotted line when link is active */
}

以下は 別の方法 を使えば、ブラウザが作成する9999ピクセルの巨大なボックスを避けながら、テキストを隠すことができます。

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}