如何使用CSS在顯示圖像時有效隱藏文字？

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

方法2：文字隱藏

另一個解決方案避免了負片產生的大的隱形盒子縮進：

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中文網其他相關文章！