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

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

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

預(yù)先載入的

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

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

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

沒有延遲的翻滾──不使用預(yù)先載入圖像

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

為了竦靡桓齙湫偷陌磁シ魴Ч閫ǔＰ枰⑷齠懶⒌耐枷瘢?b> 圖A 所示。其中一個(gè)是普通的按鈕，一個(gè)是懸浮狀態(tài)，以及一個(gè)是激活狀態(tài)。普通按鈕的圖像文件將成為初始化頁面載入的一部分，但其它兩個(gè)圖像將被分開地載入，這樣使得它們能夠在用戶的瀏覽器中得以使用。

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

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

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

一個(gè)使用過程的范例

這里是一個(gè)代碼范例，范例的無預(yù)先載入的翻滾技術(shù)應(yīng)用于圖形/CSS混合按鈕。在這種情況下，按鈕文本以無順序列表而標(biāo)記，三個(gè)外形美觀的按鈕包含在具有ID menu的div中。首先，CCS為：

div#menu {
height: auto;
width: 150px;
}
div#menuli {
height: 30px;
width: 100px;
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
line-height: 30px;
list-style-type: none;
background-image: url(images/buttons.jpg);
background-position: 0px 0px;
}
div#menuli a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #FFFFFF;
}
div#menulia:link {
color: #FFFFFF;
background-image: url(images/buttons.jpg);
background-position: 0px 0px;
}
div#menulia:visited {
color: #CCCCCC;
background-image: url(images/buttons.jpg);
background-position: 0px 0px;
}
div#menulia:hover {
font-weight: bold;
color: #FFFFFF;
background-image: url(images/buttons.jpg);
background-position: 0px -30px;
}
div#menulia:active {
font-weight: bold;
color: #FFFFFF;
background-image: url(images/buttons.jpg);
background-position: 0px -60px;
}

這里是這三個(gè)按鈕的HTML：

<div id="menu">
<ul>
<li><a href="link1.html">Button 1</a></li>
<li><a href="link2.html ">Button 2</a></li>
<li><a href="link3.html ">Button 3</a></li>
</ul>
</div>

在以上代碼中，請(qǐng)注意到 div#menu li 規(guī)則指定了按鈕的高度和尺寸。指定 line-height 以匹配按鈕的高度，以確保文本能垂直地放置在中央。 background-position 屬性控制著背景圖像的左上角的位置。

在 div#menu li 規(guī)則中，與 width: 100% 和 height: 100% 聯(lián)合在一起的 display: block 屬性，能夠使得按鈕框內(nèi)而不只是文本被點(diǎn)擊。

最后，在獨(dú)立按鈕狀態(tài)規(guī)則中，比如 div#menu lia:link ， color 和 font-weight 屬性建立了文本翻滾效果，同樣 background-image 和 background-position 也為背景圖像實(shí)現(xiàn)了相同的功能。將懸浮狀態(tài)設(shè)置為 background-position: 0px -30px 能夠讓背景圖像增加到30象素，以致于頂端按鈕外表被隱藏。同樣，將激活狀態(tài)設(shè)置為 background-position: 0px -60px ，可以將背景圖像象素提高得更多。 background-image 需要在每一規(guī)則中不斷地重復(fù)。

這一技術(shù)能夠讓你獲得具有傳統(tǒng)圖形按鈕的三維效果，并具有快速的CSS文本風(fēng)格的混合按鈕。同樣，這一技術(shù)能夠讓你實(shí)現(xiàn)無延遲或者無圖像預(yù)先載入的圖形翻滾效果。