私は、自分の画像を使用して、ちょっとしたカスタム ボタンをサイトに配置する方法を探していました。
そして、Formspring のサイトで興味深い瞬間を見つけました。ボタンのすべての状態 (ホバーとプッシュ) を含む 1 つの画像ファイルしかありません。
(ソース: formspring.me )
そして、この画像は背景にあります。私は疑問に思います-CSSで可能ですか-ホバーとプッシュで表示する背景画像の一部を変更しますか?
それがどのように行われるかの例を提供できますか?
私は、自分の画像を使用して、ちょっとしたカスタム ボタンをサイトに配置する方法を探していました。
そして、Formspring のサイトで興味深い瞬間を見つけました。ボタンのすべての状態 (ホバーとプッシュ) を含む 1 つの画像ファイルしかありません。
(ソース: formspring.me )
そして、この画像は背景にあります。私は疑問に思います-CSSで可能ですか-ホバーとプッシュで表示する背景画像の一部を変更しますか?
それがどのように行われるかの例を提供できますか?
background-position
さまざまな状態がいつトリガーされるかを変更する必要があります。
div{
background:url('http://cdn.formspring.me/images/global/social-fsvaf743e61c7e51b26765c392c6ee597f7994ad03f.png');
width:191px;
height:29px;
}
div:hover{
background-position-y:-29px;
}
ここで私のjsfiddleをチェックしてください:http://jsfiddle.net/ApJR9/
button { background: url(../images/bg.png) 0 0 no-repeat transparent; }
button:hover { background-position: 0 20px; }
button:active { background-position: 0 40px; }
ブラウザーは、マウスオーバー (:hover) やクリック (:active) などのさまざまなイベントをキャッチし、これらのイベントごとにスタイルを設定できます。