CSSを使用して画像を表示しながらテキストを効果的に非表示にする方法

CSS を使用した非表示テキスト

CSS を使用してテキスト要素を非表示にすることは、さまざまなデザイン目的に役立ちます。一般的なシナリオの 1 つは、テキストをロゴとして画像に置き換えることです。この記事では、画像の表示中に元のテキストを効果的に削除する方法という特定の問題に対処します。

テキストを非表示にする解決策

画像を表示しているときにテキストを非表示にする方法は複数あります。画像配置のために要素の寸法を維持します。

方法 1: テキストインデント

テクニックの 1 つは、text-indent を使用してテキストを画面外に押し出すことです。

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 */
}

方法 2: テキストを非表示にする

別の解決策は、ネガティブによって作成される大きな目に見えないボックスを回避します。 indentation:

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

どちらのメソッドも、テキストを画面外に押し出すか要素内に非表示にすることで、目的の結果を実現します。

以上がCSSを使用して画像を表示しながらテキストを効果的に非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。