重現色彩效果

Question

當選擇引用其他單元格的Excel單元格時，將以不同的顏色系統突出顯示所引用的單元格。 我想模仿並在JavaScript和CSS中重現這種效果。

例如，在開始時， Cell A1的背景顏色是gray ：

雙擊Cell C2 ，其引用的單元格將突出顯示：

我們僅學習背景色（忽略邊框色）。 現在A3是purple ; A2在purple on top of red呈purple on top of red ; A1是purple on top of red on top of blue on top of gray 。

有誰知道這種顏色效果的調用方式（例如overlay和hover ）？ 那里有opacity的概念嗎？ 給定purple和red的顏色代碼（可能還有opacity數字），JavaScript和CSS中是否有一種簡單的方法來產生A3的顏色？

Answer 1

我唯一能想到的就是使用svg和矩形，動態生成它們並根據所選單元格的數量為它們分配顏色（我想Excel會分配隨機顏色嗎？！）。 您可以使用mix-blend-mode來實現疊加效果（請參見下面的代碼片段，注意定義的顏色和顯示的顏色）。

 .multiply { background: white; } .multiply rect { mix-blend-mode: multiply; } 

 <svg class="multiply" width="400" height="500"> <rect fill="cyan" width="150" height="20" x="0" y="0" /> <rect fill="yellow" width="100" height="40" x="50" y="0" /> <rect fill="magenta" width="50" height="60" x="100" y="0" /> </svg> 

您可以執行此操作的另一種方法（這是更多面向Javascript的方法）是計算要合並的顏色的RGB值，然后使用R，G和B值創建覆蓋的顏色， 請參見鏈接