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的支持 - 。

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

您可以在表

中使用without class class

现在您可以在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/

css：将颜色混合到现有背景颜色的类？

4 个答案: