重現顏色效果

選擇了引用其他單元格的Excel單元格時，引用的單元格將以不同的顏色系統地高亮顯示。我想用JavaScript和CSS來模仿和重現這種效果。重現顏色效果

例如，在一開始的Cell A1背景色爲gray：

當我們雙擊Cell C2，其引用的單元格強調：

我們只學習背景顏色（並忽略邊框顏色）。 A3現在在purple; A2在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的顏色？

來源

2016-06-12 SoftTimur

我能想到的唯一方法是使用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值創建覆蓋的顏色，see link

來源

2016-06-12 04:33:45 ali404

僅供參考，Excel不分配隨機顏色（第一個參數始終爲藍色，第二個爲紅色，第三個爲紫色...）。我從結果中注意到的一件事是，你的顏色比我的OP圖像更「不透明」......所以我仍然認爲Excel的風格有一個「不透明」的概念...... – SoftTimur

你總是可以風格化與rgba rect（如果通過使用rgb值，您不會獲得所需顏色的不透明度）。這裏的問題更多的是如何組合兩種顏色，而不是如何將不透明度設置爲html元素，對吧？ – ali404

所以在你看來，混合混合的順序（即一個顏色在另一個之上）並不重要，對吧？ – SoftTimur

重現顏色效果

回答

相關問題