3

有没有办法使用 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”状态？

4

4 回答 4

2

使用较新的浏览器

这篇文章已经有一年多了，但我想我会注意到现在有一​​些新浏览器的解决方案。以下已在 IE10（IE9 及以下不可用）、FF21 和 Chrome27 中测试。

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

这是示例小提琴。尽管对于后备支持，您可能仍需要额外的供应商前缀。

较少的

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

}
于 2013-06-07T20:19:11.510 回答
0

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

input[type="button"] {background:#fff;}
input[type="button"]:active {background:#000}
[...]
<input type="button" value="Test"/>
于 2012-05-20T06:02:47.797 回答
0

你的意思是这样的：

http://jsfiddle.net/UgQvg/2

?

于 2012-05-20T06:06:32.683 回答
0

不幸的是，我不认为 LESS 可以那样工作。您基本上是在尝试使用外部范围引用嵌套范围的颜色 - 或者更确切地说，试图获得类似多态的行为。LESS 只是不这样做。这很麻烦，但您可能必须:active为每种按钮类型定义部分。看到这个 JsFiddle。

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

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

于 2012-05-20T06:07:34.870 回答