3

CSS を使用して、背景画像を持つボタンのスタイルを設定しています。プレス効果が欲しい。そのため、フィドルで示されているように、アクティブなときにボタンを垂直にフロップしてみました。

http://jsfiddle.net/krishnathota/xzBaZ/10/

画像を反転できますが、ボタン全体と一緒です。背景画像のみを反転するにはどうすればよいですか。??

または何以外の別のクラスで書く必要があります.button:activeか?? 助けてください

3 番目と 4 番目のボタンを確認し、BackgroundImage を反転してください。Firse と 2 番目のボタンには、<img>I do not want it to be Flipped が含まれています。

これがクロスブラウザに対応していない場合、ボタンがアクティブなときに背景色を変更せずに背景を変更する方法を教えてください。

4

1 に答える 1

2

Add active state only for image

.button:active img{
    /*Vertical Flip background img*/
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv; /*IE*/
    top: 1px; position: relative;
    /*-webkit-transform: translateY(1px);-moz-transform: translateY(1px);*/
  }

DEMO

Here is the best tutorial for flipping the elements separately

http://www.sitepoint.com/css3-transform-background-image/

于 2013-03-01T06:32:23.700 に答える