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,在我的javascript代码搞清楚(因为这将突出动态地进行)该行是否是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

使用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-的支持.