Flip Button Background Image Vertically

Question

我正在使用 CSS 来为我的按钮设置样式，该按钮具有背景图像。我需要一个按下的效果。因此，我尝试在按钮处于活动状态时垂直翻转它，如 fiddle 中所示。

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

我能够翻转图像，但同时也会翻转整个按钮。如何只翻转背景图像？？

我必须在另一个类中编写代码，而不是 ".button:active" 吗？请帮忙。

请检查第三和第四个按钮并翻转背景图像。第一和第二个按钮包含一个 <img>，我不想翻转它。

如果这不支持跨浏览器，请告诉我如何在不改变背景颜色的情况下在按钮激活时更改背景。

- Krishna Thota

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);*/
  } 

演示

这里是分别翻转元素的最佳教程。

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

- Sowmya

---

你有没有检查过，在你的演示中Flip实际上是不起作用的，只有定位在起作用。首先，请将你的代码与我的fiddle进行比较，看看翻转方面的差异。请考虑第三和第四个按钮。 - Krishna Thota

@KrishnaThota 是的，我做到了。在你的演示中，翻转不仅是文本，也包括图像，但在我的演示中，它只翻转图像。这是你需要的东西吗？还是其他什么？ - Sowmya

不好意思，您翻转的是<img>标签，但我需要翻转背景图片。请再仔细检查一下。 - Krishna Thota

@KrishnaThota，请检查你的fiddle。背景图片链接不起作用，因此无法在那里看到任何图片。 - Sowmya

浮雕效果仅由背景图像产生。请检查fiddle Css中的第43行。 - Krishna Thota