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：將某種顏色混合到現有背景顏色的類？

回答

相關問題