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。

<强> LESS

.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);}

}

Answer 2

我不确定您的background-image:linear-gradient(top, #fff, #000); css规则，但如果您想更改按钮的背景，我想这就是方式 - 而不是.class选择器使用[type='']否则{{1}不会工作：

:active

Answer 3

你的意思是这样的：

http://jsfiddle.net/UgQvg/2

Answer 4

不幸的是，我不认为LESS可以那样工作。您基本上是尝试使用外部作用域引用嵌套作用域的颜色 - 或者更确切地说，尝试获取类似多态的行为。少就是不这样做。这很麻烦，但您可能必须为每个按钮类型定义:active部分。请参阅this JsFiddle。

现在，我认为你可以使用SASS做这样的事情（比如LESS，但是服务器端，基于Ruby），也许使用包含专门按钮类的列表变量，然后使用@each循环生成:active样式。但这可能有点过头了，除非你有专门风格的很多。

尽管如此，如果您使用的是LESS，您可能需要查看LESS Elements - 一组有用的mixin，其中包括渐变支持。

使用CSS或LESS翻转背景

4 个答案:

使用较新的浏览器