スプライトのCSSを使用する方法

Question

可能性の重複：
Best Way to Sprite Images?

I私はサイトにログインするユーザーのために使用する次のイメージを持っています。私は適切にCSSの作業を行うことができないのですが

http://dl.dropbox.com/u/7468116/facebook_signin.png

。

Answer 1

.sprite { 
background-image: url("pathto/facebook_signin.png"); 
background-position: 0 0; 
} 

.sprite:hover { 
background-position: 0 16px /*or whatever the y position of the 2nd button is*/ 
} 

.sprite:active { 
background-position: 0 32px /*or whatever the y position of the 3rd button is*/ 
} 

Answer 2

あなたのCSSでは正確には機能しません。スプライトは、ホバー（または他の状態）で画像の背景位置を変更することを含む。

だから、本当にただ

#element { 
    background-position-y: 10px; 
} 
#element:hover { 
    background-position-y: 0px; 
} 

だあなたのCSSを見て参考になります。このような

Answer 3

何か作業をする必要があります：あなたがMac上である場合は、自動的にあなたのCSSファイルを書き込むためにいくつかのツールを使用することができます

a.fb { 
    display: block; 
    background: ("/path/to/sprite.png") 0 0 no-repeat; /* start with normal state */ 
    width: 150px; 
    height: 18px; 
    text-indent: -9999px; /* for image replacement */ 
} 
    a.fb:hover, 
    a.fb:focus { 
     /* hover and focus state */ 
     background-position: 0 -20px; 
    } 
    a.fb:active { 
     /* click state */ 
     background-position: 0 -40px; 
    } 

Answer 4

。これらのツールはあなたのスプライトを効果的な方法で注文していますし、あなたのCSSファイルも書きます。ピクセル座標などを注文して計算することで戦う必要はありません。 はSprite Masterを示唆しています。