html - 使用 CSS 或 LESS 翻转背景

Question

有没有办法使用 CSS 或 LESS 以编程方式翻转元素的背景？具体来说，我想反转按钮的背景渐变。我不想翻转按钮的内容 - 只是背景。

例如，这个:

.button {background-image:linear-gradient(top, #000, #fff);}

应该变成:

.button:active {background-image:linear-gradient(top, #fff, #000);}

------------ 编辑:添加更多细节。 ----------

使用这个 LESS 代码:

.button {

  background-image:linear-gradient(top, red, green);

  &.primary {background-image:linear-gradient(top, blue, yellow);}
  &.secondary {background-image:linear-gradient(top, brown, grey);}

  &:active {background-image:linear-gradient(top, ..., ...);}

}

有没有一种方法可以让我反转渐变的方向，而不必为“.button”、“.primary”和“.secondary”类分别定义“:active”状态？

Answer 1

使用较新的浏览器

这篇文章已有一年多了，但我想我会注意到现在有一​​个适用于某些较新浏览器的解决方案。以下已在 IE10(IE9 及以下版本无效)、FF21、Chrome27 中测试。

使用一个伪元素和一个转换，你可以得到你最初想要的。最初，某些问题不允许对伪元素进行转换，因此这在某些旧版本中将不起作用。

Here is the example fiddle. 虽然为了回退支持，你 may still want the additional vendor prefixes .

少

.button {

  background-image:linear-gradient(to bottom, red, green);
  position: relative;

  &:after {
     content: '';  
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: -1;

     &:active {
       -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
           -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
               transform: rotate(180deg);
     }
  }

  &.primary {background-image:linear-gradient(to bottom, blue, yellow);}
  &.secondary {background-image:linear-gradient(to bottom, brown, grey);}

}