compass: 圖片替換文字

在制作網頁時，我們大部份將logo以圖片的形式呈現，但是圖片的內容是無法被搜尋機器人讀取的，所以我們就少了一個提升網站SEO的機會。這時候圖片替換文字的技術就派上用場了，它能夠讓我們輸入的文字被機器人讀取，又可以讓使用者只看到圖片的內容，同時達到視覺以及提升SEO的功能，實為一石二鳥之計。以下為實際的例子：

(截取至OHM跨界所)

[[MORE]]

使用者看到的是一張圖片，而html中是一個文字為OHM的a標籤，此段CSS程式碼為：

.logo a {
  display: block; /* 要將行內元素轉換成塊元素才能設定寬高 */
  text-indent: -119988px;
  overflow: hidden;
  text-align: left;
  background-image: url("/images/logo.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* 圖片的大小 */ 
  width: 100px; 
  height: 48px;
}

但是這些css的程式碼非常的繁瑣，而且一旦圖片尺寸變更了，我們還要去重新設定樣式的寬高。還好compass提供了一個非常便利的mixin，此mixin最大的特點就是幫我們自動設定圖片尺寸的大小，一旦發生圖片尺寸被變更的情形，我們就不用再次設定樣式的長寬了，而且只需輸入一行程式碼就可以實現圖片替換文字的功能，這段程式碼如下：

.logo a {
  display: block; /* 要將行內元素轉換成塊元素才能設定寬高 */
  @include replace-text-with-dimensions("logo.png");
}

這段程式碼經由compass編譯後，會自動產生前面所述的CSS程式碼，而且樣式的長寬也被設定好了。

需要的注意事項： 如果您欲設定的圖片替換文字的元素是行內元素的話，如a、span、strong ...等等標簽，一定要將行內標簽轉換成塊元素標簽(disaplay: block;)，這樣設定的長寬才會有效果。

參考資料：

• Compass Text Replacement
• OHM