如何使用 CSS 將 HTML 文字替換為圖像？

使用 CSS 用圖像取代 HTML 文字

在 HTML 中，通常使用標籤來建立標題並在網頁中顯示文字頁。但是，在某些情況下您可能希望用圖像取代文字。本文透過探索兩種有效的 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 */
}

解決方案 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;
}

透過實作其中任何解決方案，您可以有效地隱藏 HTML 標籤內的文字並顯示所需的圖片。

以上是如何使用 CSS 將 HTML 文字替換為圖像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！