1

更新:この質問の元の言い回しはあいまいだったので、私が求めていることをよりよく表現するために修正しました。

2つのdivがあるとしましょう

<div class='button'>A</div>
<div class='button green-button'>A</div>

次のスタイルで:

div.button {
  /* define position,  size, etc ...*/
  color:#FBB
  background-color:#F00
}

div.button.green-button{
  color:#BFB
  background-color:#0F0
}

ここに画像の説明を入力ここに画像の説明を入力

colorこの例では、との値をbackground-color1 桁シフトするだけで、最初のボタンの色相を赤から緑に簡単に変更できました。青いボタンを作成したい場合は、3 番目のボタンに対して同じシフトをもう一度行うことができます。

ただし、ある色から次の色に完全に移行したくない場合は、少し注意が必要です。

background-colorさらに、プロパティとプロパティだけでなく、div 内のすべてをカラーシフトしたいと考えていcolorます。したがって、div に画像を配置して画像を配置すると、画像の色もシフトされます。

これはCSSで可能ですか？そうでない場合は、Javascriptでできますか？

4

6 に答える 6

5

みんなが勝手な推測を投稿しているので、すぐに飛び込みます。

CSSフィルターを使用して何かを達成できます（あなたの場合hue-rotate）

または、 LESSなどの CSS プリプロセッサを使用して同じことを行います。

于 2012-09-29T17:49:19.537 に答える
1

あなたはこのような意味ですか：

デモ

HTML：

<a class="button">A</a>​

CSS：

.button{
    font-family:sans-serif;
    font-size: 80px;
    display:block;
    line-height:100px;
    text-align:center;
    color:rgba(255,255,255,0.5);
    width:100px;
    height:100px;
    background-color:green;
}

.button:hover{
    background-color:red;
}
​

それとも、それ自体でカラーオフセットを計算するものを探していますか？

あなたがいるならCSS3がありますfilter: hue-rotate(angle);

デモ

HTML：

<a class="button">A</a>​

CSS：

.button{
    font-family:sans-serif;
    font-size: 80px;
    display:block;
    line-height:100px;
    text-align:center;
    color:rgba(255,255,255,0.5);
    width:100px;
    height:100px;
    background-color:green;
}

.button:hover{
    -webkit-filter:hue-rotate(250deg);
    -moz-filter:hue-rotate(250deg);
    -ms-filter:hue-rotate(250deg);
    filter:hue-rotate(250deg);
}
​
于 2012-09-29T17:51:47.600 に答える
1

ええ、ただし、複数の要素が必要になります。

HTML:

<div>
    <span class="over-bg"></span>
    <span>A</span>
</div>​

CSS:

div, span { height:100px; width:100px; vertical-align:middle;
            text-align:center; }

div { background-color:#ff3300; position:relative; margin:20px; float:left; }
span { position:absolute; left:0; top:0; height:100%; width:100% }
span.over-bg { background-color:#22FF00; display:none; }
div:hover span.over-bg { display:block; }

http://jsfiddle.net/TeCvr/1/

疑似要素を使用した別のアプローチ:

HTML:

<div>
    <span>A</span>
</div>​

CSS:

div, span { height:100px; width:100px; vertical-align:middle;
            text-align:center; }

div { background-color:#ff3300; position:relative; margin:20px; float:left; }
span { position:absolute; left:0; top:0; height:100%; width:100% }
div:hover:before { display:block; content:""; position:absolute; left:0;
                   top:0; height:100%; width:100%; background-color:#22FF00; }

http://jsfiddle.net/TeCvr/2/

于 2012-09-29T17:42:34.540 に答える
1

次のような CSS3 でサポートされている遷移スタイル ルールを使用できます。

   .button:hover {
     background-color: #F0F0F0;
     -webkit-transition: background-color 1ms linear;
     -moz-transition: background-color 1ms linear;
     -o-transition: background-color 1ms linear;
     -ms-transition: background-color 1ms linear;
     transition: background-color 1ms linear; 
}

これを達成したい理由について具体的な理由はありますか..? そのようなアプリケーションは考えられません。デザインのリバース エンジニアリング中にこれに遭遇し、この動作の原因となった CSS を見つけることができなかった場合を除きます..?

参考： http ://www.css3.info/preview/css3-transitions/

于 2012-09-29T17:55:36.977 に答える
0

私はあなたを理解しているかどうかわかりません。divのクラスを変更できます。たとえば、異なるプロパティを持つ .button から .buttongreen へ。

于 2012-09-29T17:44:36.970 に答える
0

colorプロパティを使用しなくてbackground-colorも、次のものを使用できます。

    background-image: linear-gradient(to bottom, #006e2e 0%,#006e2e 100%)

これは特定の色から同じ色へのグラデーションですが、グラデーション全体は CSS の色ではありません。

于 2012-09-29T17:45:14.963 に答える