垂直翻转按钮背景图像

问题描述：

我使用CSS来设置具有背景图像的按钮。我需要一个新闻效果。所以我尝试了在按钮处于活动状态时垂直放置按钮，如小提琴中演示的那样。垂直翻转按钮背景图像

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

我能够翻转图像，但与整个按钮一起。我怎么才能翻转背景图片。 ??

我必须在.button:active以外的其他课程中写什么？ Plaease帮助

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

如果这不是跨浏览器支持，你能告诉我如何改变背景时按钮被激活而不改变背景颜色？

答

添加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/

你有没有检查，Flip实际上不适用于你的演示。只有定位正在工作。首先请将你的小提琴和我的小提琴比较一下，看看翻转的不同。并请考虑第三个和第四个按钮。 – 2013-03-01 06:36:05

@KrishnaThota是的，我做到了。在你的演示中，翻转文本以及图像翻转，但在我的演示中，它只翻转图像。这是你需要什么或别的？ – Sowmya 2013-03-01 06:37:44

不，你正翻转''，但我需要翻转背景图片。请考虑重新检查。 – 2013-03-01 06:39:21

垂直翻转按钮背景图像

相关推荐