3

Is there a way to programmatically flip the background of an element using CSS or LESS? Specifically, I would like to invert the background gradient of a button. I do not want the content of the button to be flipped - just the background.

For example, this:

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

should become:

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

----------- EDIT: Adding more detail. -----------

Take this LESS code:

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

}

Is there a way for me to reverse the direction of the gradient without having to define the ":active" state separately for the ".button", ".primary" and ".secondary" classes?

4

4 に答える 4

2

新しいブラウザの場合

この投稿は 1 年以上前のものですが、一部の新しいブラウザーには現在解決策があることに注意してください。以下は、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 に答える