css: Klasse, die eine Farbe in vorhandene Hintergrundfarbe mischt?

Question

Ich habe eine Tabelle mit Reihen von abwechselnden Farben, zB:

<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> 

Ich möchte ein paar der Tabellenzellen markieren, aber in einer anderen Art und Weise, wenn die Zelle in einer geraden oder einer ungeraden Zeile, wie Mehrere vertikal gestapelte Zellen könnten hervorgehoben sein, und ich möchte die Änderung der Zeilenfarbe beibehalten. Was ich war zuerst nur kam mit zwei Klassen erstellen, highlight_even und highlight_odd, in meinem Javascript-Code herauszufinden (wie diese Hervorhebung dynamisch erfolgen wird), ob die Zeile even oder odd und setzte class entsprechend, zum Beispiel:

<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> 

Die Farben sind jedoch sehr einfach. Ich möchte highlight_even durch Mischen von Grün in die even Farbe und highlight_odd durch Mischen der gleichen grünen in die odd Farbe machen. Gibt es eine Möglichkeit, dies in CSS zu erreichen, so dass die gleiche hervorgehobene Tabelle einfach so aussehen könnte?

<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> 

So etwas wie (in Pseudo-Code):

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

Answer 1

Warum nicht einfach die Mischung manuell definieren? Sie sollten dafür auch nicht mehrere Klassen highlight_* benötigen. Unter der Annahme, geraden Zeilen sind # ff0 und ungerade Zeilen # f0f und ein einfaches weißes Highlight:

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

Answer 2

die Hintergrundfarbe des Highlight mit rgba Set.

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

(Wo 0.5 die Opazität ist.)

Oder für eine detailliertere Progressive Enhancement

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

Edited Unterstützung für IE8- zu adressieren.

Answer 3

Sie könnte etwa so versuchen:

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

Dies nutzt CSS3, so wird es nicht funktionieren in ältere Browser Und Sie werden für jeden Browser Regeln schreiben (dh. background-image: -moz-linear-gradient: ..., etc.)

Answer 4

Hallo Sie können ohne definieren verwendete Klasse in Tabelle

jetzt können Sie in tr Farbe definieren gerade oder ungerade Eigenschaften

als ähnliche

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

und prüfen nun live here

http://jsfiddle.net/n83K5/1/