[英]Reproduce a colour effect
When an Excel cell referencing other cells is selected, the referenced cells are systematically highlighted with different colours. 当选择引用其他单元格的Excel单元格时,将以不同的颜色系统突出显示所引用的单元格。 I would like to imitate and reproduce this effect in JavaScript and CSS.
我想模仿并在JavaScript和CSS中重现这种效果。
For instance, in the beginning the background colour of Cell A1
is gray
: 例如,在开始时,
Cell A1
的背景颜色是gray
:
Once we double click on Cell C2
, its referenced cells are highlighted: 双击
Cell C2
,其引用的单元格将突出显示:
We only learn the background colours (and ignore the border colours). 我们仅学习背景色(忽略边框色)。
A3
now is in purple
; 现在
A3
是purple
; A2
is in purple on top of red
; A2
在purple on top of red
呈purple on top of red
; A1
is in purple on top of red on top of blue on top of gray
. A1
是purple on top of red on top of blue on top of gray
。
Does anyone know how this colour effect is called (eg, overlay
, hover
)? 有谁知道这种颜色效果的调用方式(例如
overlay
和hover
)? Is there a notion of opacity
there? 那里有
opacity
的概念吗? Given the colour code of purple
and red
(and maybe an opacity
number), is there an easy way in JavaScript and CSS to produce the colour of A3? 给定
purple
和red
的颜色代码(可能还有opacity
数字),JavaScript和CSS中是否有一种简单的方法来产生A3的颜色?
The only thing I can think of is by using svg and rectangles, dynamically generating them and assigning them colors based on numbers of cells selected (I suppose Excel assigns random colors?!). 我唯一能想到的就是使用svg和矩形,动态生成它们并根据所选单元格的数量为它们分配颜色(我想Excel会分配随机颜色吗?!)。 You can achieve the overlay effect by using
mix-blend-mode
(see snippet below, pay attention to the colors defined and the colors displayed). 您可以使用
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>
Another way you can do it (this is more Javascript oriented) is to compute the RGB value of the colors you want to combine and then by using the R, G and B values create the overlayed color, see link 您可以执行此操作的另一种方法(这是更多面向Javascript的方法)是计算要合并的颜色的RGB值,然后使用R,G和B值创建覆盖的颜色, 请参见链接
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.