使用CSS或LESS翻转背景

Question

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

例如，这样：

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

应该变成：

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

将以下 LESS 代码翻译成中文：

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

考虑以下 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”状态的情况下反转渐变方向？

- say

---

你的意思不是background-image，而是background-color吧？ - Yevgeny Simkin

@Dr.Dredel：不，他指的是background-image。 - voithos

@Dr.Dredel - 图像与渐变效果配合使用。 - say

我猜你可以使用CSS的transform来实际翻转元素，但这似乎对于这个问题来说有点过度。 - Spudley

这会导致按钮的内容翻转，而我不想要这种情况发生。 - say

添加第三个参数来表示“反转/不反转”（连同起始和结束颜色）到渐变函数中，是否可以？你使用的是哪个版本的LESS：LESS.js、lessphp、WP-LESS？ - FelipeAls

Answer 1

使用新版浏览器

这篇文章已经过去一年了，但是我想指出现在一些新版浏览器已经有了解决方案。以下内容已在IE10（不适用于IE9及以下版本），FF21和Chrome27���进行了测试。

使用伪元素和变换，您可以获得最初所需的效果。最初，一些问题不允许在伪元素上进行变换，因此在一些旧版本中无法实现。

这是示例fiddle。 虽然为了回退支持，您可能仍然需要其他供应商前缀。

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

}

- ScottS

Answer 2

关于你的 background-image:linear-gradient(top, #fff, #000); css 规则，我不太确定，但如果你想改变按钮的背景，我猜这是正确的方法 - 用 [type=''] 替代 .class 选择器，否则 :active 将无法工作：

input[type="button"] {background:#fff;}
input[type="button"]:active {background:#000}
[...]
<input type="button" value="Test"/> 

- RandomWhiteTrash

---

谢谢回复，但我不认为你理解我的问题。我知道如何更改背景颜色。 - say

Answer 3

你的意思是像这样：

http://jsfiddle.net/UgQvg/2

?

- Yevgeny Simkin

---

视觉上，那是我想要的最终结果，但从技术上讲，我不想明确定义要翻转的颜色。我希望通过另一种方式进行翻转，以便可以全局应用于所有按钮。 - say

我不明白。你的意思是你不想定义要翻转的颜色？你想将颜色动态插入作为单独的类变量？我相信你可以使用完全相同的方法在LESS中实现这一点，但是使用颜色变量而不是显式值。 - Yevgeny Simkin

我会在我的问题中添加更多细节。我意识到我正在寻求一些非常特别的东西。 - say

更新了更多细节。希望能够澄清我所寻找的内容。 - say

Answer 4

很遗憾，我认为LESS不能以那种方式工作。你基本上是试图使用外部作用域引用嵌套作用域的颜色 - 或者说，试图获得类似多态的行为。LESS就是不这样做的。这很麻烦，但你可能需要为每个按钮类型定义:active部分。请参见this JsFiddle。

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

尽管如此，如果你正在使用LESS，你可能想看看LESS Elements - 一个有用的mixin集合，其中包括渐变支持。

- voithos

---

这段代码本来是可以工作的，但我有几个不同颜色的按钮（例如主要和次要）。我想使用一个规则来翻转它们所有按钮的颜色。因此，使用显式变量是行不通的 - 否则我将不得不为它们所有定义“.inverted”。为什么只需要一个规则？因为我在我的less文件中将所有按钮嵌套在主“.button”定义下面。 - say