重现颜色效果

选择了引用其他单元格的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

重现颜色效果

回答

相关问题