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> 

Я хочу, чтобы выделить кучу ячеек таблицы, но по-другому, если ячейка находится в четной или нечетной строке, а могут быть выделены несколько вертикально уложенных ячеек, и я хочу сохранить изменение цвета строки. То, что я первый придумал был просто создать два класса, highlight_even и highlight_odd, выяснить в моем яваскрипта кода (как это выделение будет сделано динамически) ли строка even или odd и установите 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> 

Цвета очень просты. Я хочу сделать highlight_even, смешивая зеленый цвет в even, и highlight_odd, смешивая тот же зеленый цвет с цветом 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 является непрозрачностью.)

Или для более детального прогрессивного улучшения

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

отредактированы для решения поддержки IE8-.

Answer 3

Вы могли бы попробовать что-то вроде этого:

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

Это использует CSS3, поэтому он не будет работать в более старые браузеры. И вы должны будете писать правила для каждого браузера (то есть. background-image: -moz-linear-gradient: ... и т.д.)

Answer 4

Привет вы можете использовать без определения класса в таблице

теперь вы можете определить в т.р. цвет четного или нечетного свойстве

, как как этот

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