再现色彩效果答案

【问题标题】：Reproduce a colour effect再现色彩效果
【发布时间】：2016-10-12 17:48:39
【问题描述】：

选择引用其他小区的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 的颜色？

【问题讨论】：

标签： javascript css colors background-color

【解决方案1】：

我唯一能想到的是使用 svg 和矩形，动态生成它们并根据所选单元格的数量为它们分配颜色（我想 Excel 分配随机颜色？！）。使用mix-blend-mode可以实现叠加效果（见下sn-p，注意定义的颜色和显示的颜色）。

.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

【讨论】：

仅供参考，Excel 不会分配随机颜色（第一个参数始终为蓝色，第二个为红色，第三个为紫色......）。我从你的结果中注意到的一件事是，你的颜色比我的 OP 的图像更“不透明”......所以我仍然认为 Excel 的风格中有一个“不透明”的概念......
您始终可以使用 rgba 设置矩形的样式（如果使用 rgb 值无法获得所需的颜色不透明度）。这里的问题更多是如何组合两种颜色而不是如何将不透明度设置为 html 元素，对吧？
所以在您看来，mix-blend 的顺序（即一种颜色在另一种之上）并不重要，对吧？
嗯，黄色和绿色混合 = 绿色和黄色混合。不过我不太明白你的问题。