css：既存の背景色に色を混ぜるクラスですか？

Question

私は色、例えば交互の行を持つテーブルがある：

<table> 
    <tr class="even"><td></td><td></td></tr> 
    <tr class="odd"> <td></td><td></td></tr> 
    <tr class="even"><td></td><td></td></tr> 
    <tr class="odd"> <td></td><td></td></tr> 
</table> 

私はテーブルセルの束を強調したいのですが、別の方法でセルが偶数か奇数行にある場合、として垂直方向に積み重ねられた複数のセルが強調表示され、行の色の変更を維持したいことがあります。私は最初例えば、ちょうど2つのクラス、highlight_evenとhighlight_oddを作成するには、行がevenかoddであるかどうか（このハイライトが動的に行われますように）私のjavascriptのコードで把握し、それに応じてclassを設定した思い付いた：

<table> 
    <tr class="even"><td></td><td class="highlight_even"></td></tr> 
    <tr class="odd"> <td></td><td class="highlight_odd"></td></tr> 
    <tr class="even"><td></td><td></td></tr> 
    <tr class="odd"> <td></td><td></td class="highlight_odd"></tr> 
</table> 

しかし、色は非常に簡単です。私は、evenの色に緑色を混ぜてにし、同じ緑色をodd色に混ぜることによってhighlight_oddにしたいと思っています。同じハイライトされたテーブルがちょうどこのように見えるように、CSSでそれを達成する方法はありますか？

<table> 
    <tr class="even"><td></td><td class="highlight"></td></tr> 
    <tr class="odd"> <td></td><td class="highlight"></td></tr> 
    <tr class="even"><td></td><td></td></tr> 
    <tr class="odd"> <td></td><td></td class="highlight"></tr> 
</table> 

（擬似コードで）のようなもの：

td.highlight { 
    background-color: blend #ff0 into existing background-color; 
} 

Answer 1

ブレンドを手動で定義するだけではどうですか？これを行うには、複数のhighlight_*クラスが必要ではありません。偶数行と仮定すると＃のFF0であり、奇数行は＃のf0fと無地白のハイライトです：

tr.even td.highlight { background: #ff8; } 
tr.odd td.highlight { background: #f8f; } 

Answer 2

RGBAを使ってハイライトの背景色を設定します。

td.highlight { 
    background-color: #ff0; 
    background-color: rgba(255, 255, 0, 0.5); 
} 

（0.5が不透明である場合。）

以上粒状プログレッシブ・エンハンスメントIE8-のサポートに対処するために編集

.odd .highlight{ 
    background-color: /*blend of #ff0 and .odd;*/ 
} 
.even .highlight{ 
    background-color: /*blend of #ff0 and .even;*/ 
} 
.odd .highlight, .even.highlight{ 
    background-color: rgba(255, 255, 0, 0.5); 
} 

ため。

Answer 3

あなたはこのような何か試してみてください：それはで動作しませんので、これは、CSS3を使用しています

td.highlight { 
    background-image: linear-gradient(rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0) 100%); 
} 

を古いブラウザ。そして、あなたは（すなわち。background-image: -moz-linear-gradient: ...、など）各ブラウザのルールを記述する必要があります

Answer 4

こんにちは、あなたがテーブルで定義したクラスなし

を使用することができ、今あなたがTR色で偶数か奇数の特性

を定義することができます

<table> 

    <tr><td>This is one</td></tr> 
    <tr><td>This is one</td></tr> 
    <tr><td>This is one</td></tr> 
    <tr><td>This is one</td></tr> 
    <tr><td>This is one</td></tr> 
    <tr><td>This is one</td></tr> 
    <tr><td>This is one</td></tr> 
</table> 

tr:nth-child(odd) {background: red;} 
tr:nth-child(even) {background: green;}` 

となりましlive here

http://jsfiddle.net/n83K5/1/にチェックし、このようなとして