CSS: 将颜色与现有背景颜色混合的类？

Question

CSS: 将颜色与现有背景颜色混合的类？

3

我有一个表格，其中行的颜色交替，例如：

<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代码中（因为这种突出显示将是动态完成的），找出行是偶数还是奇数，并相应地设置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;
}

- Claudiu

你说的"blend"是什么意思，确切地说？ - BoltClock

透明度可能有所帮助，但在旧版本的浏览器中支持不太好。请参考http://www.w3schools.com/cssref/css3_pr_opacity.asp。 - Miquel

4个回答

2

为什么不手动定义混合效果呢？您不需要多个highlight_*类来完成这个操作。假设偶数行是#ff0，奇数行是#f0f，白色是普通的高亮：

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

- Samantha Branham

我正在将 highlight 应用于 td，而不是 tr。 - Claudiu

啊，我忘记了子选择器。那很好，基本上就是我之前用 JavaScript 手动完成的事情。 - Claudiu

0

你可以尝试这样做：

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

这个使用了CSS3，所以在旧的浏览器上无法工作。而且你需要为每个浏览器编写规则（例如：background-image: -moz-linear-gradient: ...等）。

- Ryan

0

嗨，你可以在表格中使用而不定义类

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

- Rohit Azad Malik

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- devstruck · Accepted Answer

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