-1

私は、自分の画像を使用して、ちょっとしたカスタム ボタンをサイトに配置する方法を探していました。

そして、Formspring のサイトで興味深い瞬間を見つけました。ボタンのすべての状態 (ホバーとプッシュ) を含む 1 つの画像ファイルしかありません。

このような
(ソース: formspring.me )

そして、この画像は背景にあります。私は疑問に思います-CSSで可能ですか-ホバーとプッシュで表示する背景画像の一部を変更しますか?

それがどのように行われるかの例を提供できますか？

4

3 に答える 3

2

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/

于 2013-05-19T13:21:15.543 に答える
0 
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) などのさまざまなイベントをキャッチし、これらのイベントごとにスタイルを設定できます。

于 2013-05-19T13:20:50.023 に答える