CSS - 如何設置背景：懸停效果下的2張圖像的位置？

Question

我有兩個圖像在一個 - 寬度是16px，高度是24px（因此每個圖像是16x12像素）。 我想首先顯示上的形象 - 我這樣做是這樣的：

background: url('image.png') left 0px top 12px no-repeat; 

這種運作良好。 但現在當我將它們懸停在菜單項上時，我想隱藏上面的圖像，而不是顯示下面的圖像 - 這是我不知道如何設置的。我已經試過：

background: url('image.png') left 0px top 0px bottom 12px no-repeat; 

或

background: url('image.png') left 0px bottom 12px no-repeat; 

但沒有成功。

每個意見將不勝感激。由於

Answer 1

.menuclass:hover { 
    background: url('image.png') 0px -12px no-repeat; 
} 

以使其更清晰，我通常要鍵入它，你的精靈的這一

.menuClass:hover { 
    background: url('image.png'); 
    background-position: 0 -12px; 
    bacakground-repeat: no-repeat; 
} 

的座標如下

0 0是左上角。

-16px 0右上角

-16px -24px是右下角

0 -24px是左下方

因此，要獲得第二（底部）的圖像，你只要使用0 -16px

0是說你在精靈的左邊。然後-16px是說你想從頂部開始-16px。

Answer 2

爲了使懸停按鈕這樣工作得很好，具體尺寸的元件，以包含單個圖像，然後僅倍率background-position抵消背景映射。它需要2個參數 - 一個X偏移量和一個Y偏移量。爲推動背景了你需要以抵消Y值負把它「上面」的形象：

.menuClass:hover { 
    background-position:0 -24px; 
} 

Sample provided here。