CSS 以圖取代文字

• 用 CSS 將文字以底圖取代，實例可參考 CSS Zen Garden。
• 另外還得考量無障礙 (Accessibility) 和搜尋引擎最佳化 (SEO)

---

1. display: none

   <h1><span>Headline 1</span></h1>

   h1{
     background: url(headline1.png);
     width: 200px;
     height: 100px;
   }
   h1 span{
     display:none;
   }

   • 需要額外的元素

2. visibility: hidden

   <h1><span>Headline 1</span></h1>

   h1{
     background: url(headline1.png);
     width: 200px;
     height: 100px;
   }
   h1 span{
     visibility: hidden;
   }

   • 基本上和 display:none; 一樣，只是有佔空間

3. text-indent: -9999px

   <h1>Headline 1</h1>
   

   h1{
     background: url(headline1.png);
     width: 200px;
     height: 100px;
     white-space: nowrap; /* 設為不換行，使內容集中在一行 */
     text-indent: -9999px;
   }

   • 好處是不需要額外的標籤
   
   

4. text-indent: 100%;

   <h1>Headline 1</h1>
   

   h1{
     background: url(headline1.png);
     width: 200px;
     height: 100px;
     white-space: nowrap; /* 設為不換行，使內容集中在一行 */
     text-indent: 100%;
     overflow: hidden;
   }

   • 同上，但可避免讓瀏覽器建立一個大而無用的格子