CSS を使用してロゴ内のテキストを非表示にする方法

ロゴのテキストを非表示にして背景画像を表示するには、この CSS テクニックを使用できます。このメソッドは、text-indent を使用してテキストを表示領域の外に移動し、その他のプロパティを使用して、レイアウトに影響を与えることなくテキストを非表示に保ちます。

a.logo {
    text-indent: -9999px;  /* Shifts the text far off-screen */
    overflow: hidden;      /* Ensures no overflow text is visible */
    white-space: nowrap;   /* Prevents text from wrapping to the next line */
    display: block;        /* Allows setting width and height */
    width: 150px;          /* Sets the width of the logo element */
    height: 50px;          /* Sets the height of the logo element */
    background-image: url('logo.png');  /* URL of the logo image */
    background-size: cover; /* Ensures the background image covers the entire area */
}

記事全文: CSS を使用してロゴ内のテキストを非表示にする方法
CSS スニペット

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