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

相比于常規(guī)的圖形按鈕，這些圖形/CSS混合按鈕可易于建立和載入，因?yàn)槟阒恍枰獮榭瞻装粹o外面建立和載入一個(gè)圖像，而不是為每一個(gè)按鈕建立各自的圖像。

同一個(gè)圖像可以使用在網(wǎng)頁(yè)所有按鈕的背景。按鈕的文本標(biāo)簽都是簡(jiǎn)單的CSS風(fēng)格文本。

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

你也可以建立一些可交替使用的按鈕圖像并構(gòu)建你的CSS規(guī)則，以為不同的翻滾狀態(tài)改變背景圖像。然而，這些方法給你帶來(lái)更多靈活的設(shè)計(jì)，但當(dāng)瀏覽器首次載入圖像文件時(shí)，這些可交替使用的銨鈕圖像會(huì)出現(xiàn)延遲現(xiàn)象(除非你采用預(yù)先載入按鈕圖像的方法)。

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

沒有延遲的翻滾──不使用預(yù)先載入圖像
我已經(jīng)找到一種創(chuàng)新的方法，這種方法可以滿足不同的翻滾狀態(tài)的可交替使用的按鈕圖像，而其中不需要任何圖像文件的載入。我第一次接觸這一技術(shù)是在網(wǎng)絡(luò)設(shè)計(jì)者捷克人Petr Stanicek的站點(diǎn)上的文章上發(fā)現(xiàn)的。

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

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

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

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