你到了第幾層？圖片式標題、按鈕與隱藏文本

1、所謂何物？

所謂「圖片式標題/按鈕」，是指文字圖片化的標題/按鈕。比較熟悉的就是淘寶網首頁了哈~~

上面右圖（或上圖，若是是普屏）的「便民服務」、「卡券&票務」，開小差，忘記圈了~~

2、你到了第幾層？

第一層：面向普通情況下的普通用戶
這一層是把圖片做爲了萬能手。舉個例子，凡客首頁（記得之前凡客首頁的選項卡文字都是圖片式的）頂部的搜索按鈕。咱們使用小bug(firebug的愛稱)看下源代碼：

能夠看到，搜索按鈕就是個不含任何文本內容的input標籤，no title, no value, no text, 一切的一切都取決於對應的這個background-image.

這是最初級層次的實現，只針對普通情況下的普通用戶。所謂普通情況就是網速還湊合，用戶沒有禁用圖片或是圖片服務器沒有便祕或乾脆罷工；所謂普通用戶指的就是那些靠眼睛瀏覽網頁的用戶。

你們都是聰明人，點到爲止。

第二層：面向機器、面向開發者，面向普通情況下的普通用戶
這一層的用戶標籤內保留了圖片上對應的文字，可是使用的文字隱藏的技術是display:none或是visibility:hidden之流。這兩個聲明隱藏的文字屏幕閱讀器是沒法抓取的。並且，有可能被搜索引擎醬油化（若是有惡意之嫌）。

說實話，這種層面的作法有時還不如第一層，花費的額外工夫和收效比低。惟一肯定的優點就是HTML代碼的可讀性高了點，便於開發者識別與協做。

第三層：面向機器、面向開發者，面向普通情況下的普通用戶以及特殊用戶
第三層是標籤內保留了圖片上對應的文字，經過一些可用性更高的技術隱藏了。例如淘寶首頁的搜索：

能夠看到。淘寶網首頁的搜索添加了「搜索」文字，並經過CSS text-indent:-9999px將文字隱藏了。//zxx: 我喜歡使用-999em, 由於能夠少一個字符，哇咔咔!

雖然text-indent負值在忘記設置overflow:hidden聲明時候可能會有長長虛框（見下截圖，來自淘寶網首頁），可是，對於這一層的文字隱藏來講，其爲最佳方法。

首先，從SEO的角度講，文字能夠被抓取；開發人員這邊，也能迅速肯定這段HTML的做用，便於開發協做；對於特殊用戶例如使用屏幕閱讀器的盲人用戶，也能知道這裏內容與含義；固然，普通用戶正常狀態下的訪問不受影響。

第四層：面向機器、面向開發者，面向將來的開發者，面向特殊情況、普通情況下的普通用戶以及特殊用戶
與上一層相比，仍是技術實現上的差別。第三層中，文字的隱藏是藏於遠方；而這一層，文字的隱藏時藏於文字圖片的下方。

隱藏於下方能夠應對一些特殊情況，如：

• 開發人員不當心，圖片根地址配置仍是測試地址
• 由於某些緣由，用戶禁止了圖片的顯示
• 由於某些緣由，用戶禁止了背景圖片的顯示
• 由於網速的緣由圖片加載緩慢
• 由於腳本阻塞等緣由，圖片遲遲不顯示
• 圖片服務器的DNS解析出了問題
• 圖片服務器遭受攻擊，反應遲鈍，響應緩慢，便祕不斷
• 圖片服務器作俯臥撐去了~~
• 其餘108種影響圖片顯示的特殊情況……

這種狀況下，由於文字就在圖片的下方，即便圖片顯示不出來（或延遲顯示），文字也會顯露出來，絲絕不影響功能使用。這類圖片原本就是用來美化與裝飾的，怎能左右功能呢？

這就是爲什麼說這一層多了個「面向特殊情況下的普通用戶」！

至於圖片後文本隱藏技術，則是下面要講的內容。

3、圖片後文本隱藏技術之z-index負值隱藏

根據我本身的理解：z-index負值可讓元素在其第一個含有定位屬性(relative/absolute等)的父元素之上顯示，該父元素其餘子元素之下顯示。由於body算是特殊的頂級定位元素，所以，咱們基本上能夠劃分兩種狀況，見下面手工演示圖：

提早需知的~~
下面全部的討論，示例等都是針對淘寶網首頁「個人本地生活」一欄幾個彩色標題：

這幾個標題是使用background-image定位以及經過text-indent負值隱藏文字實現。咱們如今要作的就是：保留background-image定位，文字隱藏使用其餘技術。

1. body爲定位元素
當要躲貓貓的文字的第一個有定位特性的爸爸就是body的時候，咱們直接對文字元素應用：

position:relative; z-index:-1;

就能夠實現效果了。您能夠狠狠地點擊這裏：body爲定位元素時文字隱藏技術demo

做爲普通狀態的普通用戶的咱們進去，看到的可能就是個很正常不過的樣子，看不到什麼貓膩或是玄機。

若是您瀏覽器有禁用背景圖片顯示的工具，例如FireFox下的web developer插件：

能夠嘗試禁用之。若是沒有，您也點擊點擊demo頁面上的「背景圖切換顯示」按鈕，手動隱藏標題的背景圖。您會驚奇地看到，後面顯示出了對應的文字，以下動圖顯示：

demo頁面有源代碼，這裏就重複不展現了。

利用body定位的侷限性
因爲文字藏匿於body之上（而非就在標題圖片之下），實現該效果是須要特定條件的。即：含標題背景圖片元素到body元素間的父級元素不能有背景色或其 他東西遮擋。這個很好理解：依次有a, b, c三棟樓，你住在a樓（background-image爲窗簾），想看c樓前的一棵樹（隱藏文本），須要的條件是拉開窗簾（無background- image），b樓不擋住視線（無背景色背景圖遮擋）。

這裏，不得不讚下淘寶的首頁，頁面的背景色，模塊的背景色等都交給了用戶（例如咱們修改頁面背景色爲#beceeb）：

加上沒有先前相對定位屬性氾濫的狀況，這使得基於body實現z-index負值文本隱藏變得無阻礙。

2. 普通元素爲定位元素
然而，考慮到現實，標題圖片或按鈕圖片之上有含背景色的父標籤是很正常的。所以，基於body定位不少時候是行不通的。這個時候，咱們能夠多寫點代碼，在普通元素上進行z-index文本隱藏。

這裏的普通元素指「從文字直系父標籤到第一個含有背景的祖先元素間的全部元素（包括這個祖先元素）」。普通元素上添加諸以下面代碼便可：

position:relative; z-index:0;

您能夠狠狠地點擊這裏：普通元素下z-index文本隱藏demo

//zxx:可能你跟第一個demo看不出什麼差別。實際上，第一個demo標題圖片所在的白色背景爲body標籤設置的背景色（相關設置CSS未展現）；而第二個demo標題圖片所在的白色背景爲右側id爲effect所在的區域的背景色。

對比第一個demo，這裏多了點：

#effect {
    position: relative;
    z-index: 0;
}

效果雖然實現，可是參照「relative的最小化印象原則」，上面code還能夠改進，即CSS最好添加在標題圖片元素的直系父標籤上。

.demo {
    position: relative;
    z-index: 0;
}

您能夠狠狠地點擊這裏：進一步的z-index文本隱藏demo

兼容IE6+以及其餘阿貓阿狗瀏覽器。

4、圖片後文本隱藏技術之absolute覆蓋

這個技術估計知道的人多，懶得多講。很簡單：標題圖片或按鈕應用position:absolute，覆蓋在文字之上。

您能夠狠狠地點擊這裏：absolute覆蓋實現文字隱藏demo

相似下面的HTML結構：

<h4 class="title title_1"><a href="#"></a>便民服務</h4>
<h4 class="title title_2"><a href="#"></a>卡券&amp;票務</h4>
<h4 class="title title_3"><a href="#"></a>生活超市</h4>
<h4 class="title title_4"><a href="#"></a>外賣&amp;外送</h4>

其中空a標籤就是背景圖片所在標籤。天然，咱們也可使用img標籤，頁面前定位。

5、好吧，結語

本文囉哩吧嗦了這多，其實本意是介紹z-index負值以及在文本隱藏中的實際應用。而後，扯東扯西，就這樣了。

不是什麼新的內容，我相信確定有很多同行有相似的研究或介紹，天然，也必定有比我這裏更好的方法，歡迎分享！

另外，資歷有限，文中可能有一些表述不許確之處（例如，body元素是否默認含有定位屬性），歡迎指正！

感謝您可以堅持閱讀到這裏！

最後再插上一句，若是您沒法很好地駕馭z-index負值（一是自身理解上不夠深入，二是平時糟糕的書寫習慣使得頁面定位元素、層級混亂），我建議 您仍是老老實實使用absolute覆蓋，簡單易懂。還有，從實際狀況來說，咱們有沒有必要爲了一點點可用性上的提升如此折騰呢？說句很差聽的話，你的站 點若是就那麼幾個閒得慌的人進來看看的話，你作好第一層就夠了；若是你非要對得起本身辛苦的那點工資，text-indent這種程度足矣。所謂程序員自我實現的知足對於用戶來說是沒有一點意義的。「多大的平臺作多大的事」是有其自身道理的~~~~

原創文章，轉載請註明來自 張鑫旭-鑫空間-鑫生活[ http://www.zhangxinxu.com]