Logo 不只能用 img,來試試 background 圖片取代文字技巧!

一般來說新手時期在設置 Logo 時都會使用 HTML 的 img 標籤將圖片展示出來,不過其實除了 img 之外,還能夠使用 background 背景圖片,並使用圖片取代文字的技巧來設置 Logo。

什麼是圖片取代文字?

圖片取代文字技巧,是一個區塊中,設置該區塊的背景圖片,在隱藏其文字只顯示背景的一種方式。其實文字都還在,只是我們透過一些方式讓文字不會顯示在網頁中。

使用此種方式其實是有助於 SEO 的,雖然文字在我們肉眼已經隱藏了,但是搜尋引擎仍然能夠利用爬蟲爬到 HTML 語法(只有 CSS 將它隱藏),所以人能夠只看到 Logo、但搜尋引擎能夠透過文字辨別該區塊是做什麼用的。

圖片取代文字技巧 CSS 語法

HTML

1
<div class="logo">Web Logo</div>

CSS

1
2
3
4
5
6
.logo {
background-image: url(./images/logo.png);
text-indent: 101%;
overflow: hidden;
white-space: nowrap;
}

範例說明

  • text-indent 屬性為首行縮排,而設定為 101% 後,文字就會被移到區塊之外
  • overflow 屬性部分,可參考「CSS overflow 屬性用法讓你掌握控制捲軸效果」此篇文章
    • 將此屬性設定為 hidden,就可以讓超出範圍的部分被隱藏
  • white-space:nowrap; 能夠將文字強制不換行,因為如果文字換行的話,text-indent 的特性是只有首行縮排,第二行就會回到區塊內了

後記

當然我相信這個技巧其實也不只適用在 Logo,所以大家可以依照情境,來去使用這項技巧。

這項技巧雖然好用,但就是經常忘記 XDD 所以特別寫成筆記,讓我未來可以直接進行複習,不過我覺得這一篇目前沒有寫到很好,最近比較忙,後續比較有空後再來好好優化一下此篇文章!