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

我有一个表颜色交替的行，例如：css：将某种颜色混合到现有背景颜色的类？

<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_odd混合到odd颜色中来制作highlight_even。有没有什么办法可以在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; 
}

来源

2012-03-27 Claudiu

你的意思是“混合”，究竟是什么意思？ – BoltClock 2012-03-27 21:35:04

不透明度可能会有所帮助，但它在旧式浏览器中并不是很好支持http://www.w3schools.com/cssref/css3_pr_opacity.asp – Miquel 2012-03-27 21:35:19

为什么不只是手动定义混合？您也不需要多个highlight_*类来完成此操作。假设偶数行＃FF0和奇数行＃f0f和纯白色的亮点：

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

来源

2012-03-27 21:38:25

我将'highlight'应用于'td's，而不是'tr's。 – Claudiu 2012-03-27 21:39:30

对不起，我忘了'.' – 2012-03-27 21:40:59

这应该是正确的答案imo – 2012-03-27 21:48:35

设置使用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-支持。

来源

2012-03-27 21:35:43 devstruck

考虑到IE8和更旧版本不支持这种情况是有道理的。对于他们来说，可以使用PNG-24半透明背景图像。 – 2012-03-27 21:42:18

@MaratTanalin好点。我已编辑解决IE8的支持。 – devstruck 2012-03-27 21:49:45

在您添加的更细粒度的解决方案中，为什么即使打算提前进行混合的数学计算，也要考虑半透明度问题？第一种选择可能是我如何实际做到这一点，除非管理层**真的希望在IE <9中混合突出显示。 – 2012-03-27 22:14:51

您可以尝试这样的事：

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

它使用CSS3，所以它不会在工作旧版浏览器。而且你必须编写规则对每个浏览器（即background-image: -moz-linear-gradient: ...等）

来源

2012-03-27 21:42:38 Ryan

嗨，你可以使用没有在表中定义类

现在

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

来源

2012-03-28 09:17:09

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

回答

相关问题