CSS混合風格按鈕無延遲翻轉圖形技巧_Div+CSS教程

在一個具有圖形背景的按鈕中添加CSS風格的文本，這種建立按鈕的方法結合了具有CSS翻滾(CSS rollover)標記的開發速度和效率，從而有效地提高按鈕外表圖像的三維效果。

相比于常規的圖形按鈕，這些圖形/CSS混合按鈕可易于建立和載入，因為你只需要為空白按鈕外面建立和載入一個圖像，而不是為每一個按鈕建立各自的圖像。

同一個圖像可以使用在網頁所有按鈕的背景。按鈕的文本標簽都是簡單的CSS風格文本。

預先載入的
圖形/CSS混合風格的為數不多問題之一是對翻滾效果有所限制。使用這一技術的最簡單的方法是，指定CSS風格文本的翻滾效果，并使用所有翻滾狀態(rollover states)的相同按鈕外形圖像。這可以給你帶來快速、簡潔的翻滾效果，但在一定程度上限制了你的開發選項。

你也可以建立一些可交替使用的按鈕圖像并構建你的CSS規則，以為不同的翻滾狀態改變背景圖像。然而，這些方法給你帶來更多靈活的設計，但當瀏覽器首次載入圖像文件時，這些可交替使用的銨鈕圖像會出現延遲現象(除非你采用預先載入按鈕圖像的方法)。

預先載入圖像技術已被人熟知，而且也被人們所接受。問題是預先載入圖像增加了網頁載入和出現在訪問者瀏覽器的時間。用戶訪問的第一二分鐘非常要害，所以你無論如何都必須使得網頁的初始化更加快速。使用圖形/CSS混合按鈕可以減少圖像預先載入的時間，當然假如預先載入能夠消除，頁面的初始化則更加快速。

沒有延遲的翻滾──不使用預先載入圖像
我已經找到一種創新的方法，這種方法可以滿足不同的翻滾狀態的可交替使用的按鈕圖像，而其中不需要任何圖像文件的載入。我第一次接觸這一技術是在網絡設計者捷克人Petr Stanicek的站點上的文章上發現的。

為了獲得一個典型的按鈕翻滾效果，你通常需要建立三個獨立的圖像，如圖A所示。其中一個是普通的按鈕，一個是懸浮狀態，以及一個是激活狀態。普通按鈕的圖像文件將成為初始化頁面載入的一部分，但其它兩個圖像將被分開地載入，這樣使得它們能夠在用戶的瀏覽器中得以使用。

無預先載入翻滾技術通過結合所有三個按鈕外表圖像而成為單一圖像文件而得以實現，如圖B所示。然而，不需要為每一翻滾狀態指定不同的背景圖像文件，你指定的是合成圖像的位置偏移量。在頁面初始化載入過程中，合成圖像文件能夠自動地載入，所以無需要預先載入；而且，在瀏覽器獲得不同圖像文件過程中也沒有時間上的延遲。

超大圖像與背景圖像位置偏移的結合使用可以使你有選擇性地為每一按鈕狀態顯示圖像的不同部分。按鈕文本的CSS框尺寸決定著顯示在瀏覽器的背景圖像的百分比。

對于這一技術，你必須清楚按鈕外表的確切水平和垂直尺寸，并正確使用這些尺寸，才能建立圖像文件和按鈕的CSS規則。