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>

不过，颜色非常简单。我想通过将绿色混合到even颜色中来制作highlight_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

使用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 2

为什么不手动定义混合？您也不应该需要多个highlight_*类来执行此操作。假设偶数行是#ff0，奇数行是#f0f，并且有一个纯白色突出显示：

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

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

Hi您可以在表中不定义类的情况下使用

现在您可以在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;}`

现在检查住在这里

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