javascript - 重现色彩效果

Question

当选择引用其他单元格的 Excel 单元格时，引用的单元格会系统地以不同的颜色突出显示。我想在 JavaScript 和 CSS 中模仿和重现这种效果。

比如一开始Cell A1的背景颜色是gray:

一旦我们双击 Cell C2，其引用的单元格就会突出显示:

我们只学习背景颜色(忽略边框颜色)。 A3 现在是紫色； A2 位于红色之上的紫色； A1 是紫色在红色之上在蓝色之上在灰色之上。

有谁知道这种颜色效果是如何调用的(例如，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 值创建叠加颜色，see link