☰

CSSを使用してテキストを非表示にする 質問する

tag-icon • tag-icon css
CSSを使用してテキストを非表示にする 質問する

私の HTML には次のようなタグがあります:

<h1>My Website Title Here</h1>

CSS を使用して、テキストを実際のロゴに置き換えたいです。タグのサイズを変更し、CSS で背景画像を配置することで、問題なくロゴを配置できました。ただし、テキストを削除する方法がわかりません。基本的に、テキストを画面から押し出すことでこれを実行するのを見たことがあります。問題は、どこで見たか思い出せないことです。

ベストアンサー1

これは一つの方法です:

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;
}

おすすめ記事