Question

我正在使用CSS来设置具有背景图像的按钮的样式。我需要一个按压效果。所以当它处于活动状态时，我试着垂直地翻转我的按钮，如小提琴所示。

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

我可以翻转图像，但是还有整个按钮。我怎样才能翻转背景图像。 ??

我必须在.button:active以外的其他类中编写或者写什么？ Plaease帮助

请检查第三和第四个按钮并翻转BackgroundImage。第一个和第二个按钮包含<img>我不希望它被翻转。

如果这不是跨浏览器支持，你能告诉我如何在按钮处于活动状态时更改背景而不改变背景颜色吗？

Answer 1

仅为图片添加active状态

.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 是分别翻转元素的最佳教程

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

垂直翻转按钮背景图像

1 个答案: