Html 垂直翻转按钮背景图像

我用CSS来设计我的按钮，它有一个背景图像。我需要一个新闻效果。所以我试着在按钮处于活动状态时垂直翻转按钮，如小提琴中所示

我可以翻转图像，但也可以翻转整个按钮。我怎样才能只翻转背景图像

我必须在另一个类中写作，而不是

。按钮：active

或什么？？请帮忙

请检查第三和第四个按钮并翻转背景图像。第一个和第二个按钮包含一个

，我不希望它被翻转

---

如果不支持跨浏览器，您能告诉我当按钮处于活动状态时，如何在不更改背景颜色的情况下更改背景吗？

仅为图像添加

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

是单独翻转元素的最佳教程

---

您检查过了吗？在您的演示中，翻转实际上不起作用。只有定位起作用了。首先请把你的和我的小提琴比较一下，看看翻页的不同。请考虑第三个按钮和第四个按钮。在您的演示中，“翻转”是翻转文本和图像，但在我的演示中，它只翻转图像。这是你需要的还是别的？不，你正在翻转

，但我需要翻转背景图像。请考虑重新检查。@克里斯纳塔塔检查你的小提琴。BG图像链接不工作，因此无法在那里看到任何图像。\n浮雕效果仅由背景图像造成。请检查小提琴Css中的第43行