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

使用 CSS 隱藏文字

在 HTML 中，可以使用 CSS 設定標籤的樣式，以將其文字替換為圖片。但是，原始文字在標籤分配的空間內可能仍然可見。

為了解決這個問題，一種技巧是將文字推離螢幕。這可以透過以下 CSS 屬性來實現：

text-indent: -9999px;

這會將文字傳送到左側很遠的位置，使其不可見。此外，若要顯示影像，請設定background-image 屬性並指定其URL。不要忘記定義元素的高度和寬度以容納圖像。

background-image: url(/the_img.png);
height: 100px;
width: 600px;

另一種方法是隱藏文本，同時避免創建較大的屏幕外空間：​​

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

透過將text-indent 設置為100%，文本會有效地向右移動其自身寬度，使其不可見。空白：nowrap 防止文字換行到下一行，溢出：隱藏剪輯任何多餘的內容。

以上是如何在顯示圖像時使用 CSS 有效隱藏 HTML 中的文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！