使用CSS創建菜單按鈕

Question

我正在使用HTML和CSS創建網頁。我想創建一個我已有的.gif文件的按鈕。我使用div來將項目放置在頁面本身中。如何使用圖像，並使用翻轉功能，以便圖像更改爲具有不同顏色的不同圖像。

謝謝。

Answer 1

更改圖片url的作品，但如果圖片未預加載或用戶的緩存被禁用，可能是一個討厭。

檢查出精靈FTW。

http://css-tricks.com/css-sprites/

子畫面的快速定義是一個大的圖像，包含幾個較小的圖像。因此，一張10x20的圖像，正常狀態是10x10的上限，而懸停狀態是較低的10x10。用戶只能看到上10×10，由於CSS：

.button 
{ 
    display: block; 
    width: 10px; 
    height: 10px; 
    background-image: url(to-image.gif); 
    background-repeat: no-repeat; 
    background-position: top left; 
} 

然後懸停，它轉移到圖像

.button:hover 
{ 
    background-position: bottom left; 
} 

Answer 2

使按鈕元素爲固定大小，並將.gif文件設置爲CSS中的元素背景。然後，您可以在元素上使用：hover類來更改圖像。這裏我使用「A」標籤，因此它可以在IE6上運行。

<a class="button"></a> 

.button { 
    display: block; 
    background-image: url(default.gif); 
    width: 100px; 
    height: 20px; 
} 

.button:hover { 
    background-image: url(hover.gif); 
}