CSS如何使用圖像替換 CSS中有一個很有趣的功能，叫做圖像替換(image replacement)。這個功能可以用來在網頁中使用圖像替換文字，從而實現更好的圖形效果。 在進行圖像替換之前，我們需要先了解一些基本知識。 1. alt屬性 在HTML中，我們常常使用img標簽來顯示圖片。img標簽中有一個叫做alt的屬性，它用來描述這張圖片的信息，也就是替代文本。 如果圖片無法正常顯示，瀏覽器會自動顯示替代文本，以便用戶了解圖片的內容。因此，為了網站的可訪問性和SEO優化，我們應該始終在img標簽中添加alt屬性。 2. text-indent屬性 text-indent屬性是CSS中的一個文本縮進屬性。它用來設置元素中第一行文本的縮進距離。 使用text-indent屬性，我們可以將文字縮進到元素外面，然后使用背景圖像來替代文本。 例如，我們可以這樣寫： p { text-indent: -9999px; background-image: url(images/my-image.jpg); background-repeat: no-repeat; background-position: center center; } 這樣就可以讓p元素中的文本消失，然后使用一張背景圖片來替代文本。 注意，使用text-indent屬性進行圖像替換只適用于單行文本。如果需要替換多行文本，需要使用其他方法。 3. ::before和::after偽元素 除了使用text-indent屬性，我們還可以使用CSS的::before和::after偽元素來實現圖像替換。 ::before和::after偽元素是用來向元素的開頭和結尾插入內容的。我們可以為它們設置背景圖片，從而實現圖像替換。 例如，我們可以這樣寫： p::before { content: ""; display: block; height: 20px; width: 20px; background-image: url(images/my-image.jpg); background-repeat: no-repeat; background-position: center center; } 這樣就可以在p元素的開頭插入一個包含背景圖片的塊級元素，從而實現圖像替換。 注意，使用::before和::after偽元素進行圖像替換需要為它們設置display屬性，否則它們不會顯示出來。 總結 圖像替換是一種很有用的CSS技巧，可以幫助網頁設計師實現更好的圖形效果。我們可以使用text-indent屬性或::before和::after偽元素來實現圖像替換。無論哪種方式，都需要為img標簽添加alt屬性，以保證網站的可訪問性和SEO優化。