jquery maphilight 插件 - 如何在突出显示时使图像的黑色保持 100% 黑色

Question

我正在使用 jquery.maphilight 插件来突出显示图像的某些部分。我的图像是包含线框的透明 png：

如您所见，插件生成了一个突出显示的半透明区域（html canvas 元素，它覆盖了一个线框。问题是，这种半透明颜色正在取出线框线的 100% 黑色。

有什么黑客可以解决这个问题吗？可能的解决方案是以某种方式设置该区域的混合模式，或将生成的 canvas 元素放在 png 图像后面，或设置元素的 z 索引。但是我对所有列出的想法都不成功。

Answer 1

您可以使用以下方法轻松覆盖 select 上的默认颜色更改：

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

我通常使用它在 selection 上突出显示文本。 *在你的情况下，将它用于图像或任何打印黑线而不是改变背景的东西。

Answer 2

由于 canvas 元素用作叠加元素，因此您将无法使用 multiply.

等上下文混合模式

幸运的是，您可以在 CSS 中使用它，也可以通过 mix-blend 使用它。您必须获取插件正在使用的 canvas 元素，然后对其应用此 CSS 规则：

mix-blend-mode: multiply;

注意：all browsers 不支持（FF/Chrome OK）。

结果：

var ctx = c.getContext("2d");
ctx.fillStyle ="rgba(255,200,0,0.6)";
ctx.fillRect(50, 10, 180, 100);

body {position:relative}
#c, img {position:absolute;left:0;top:0}
img {width:300px;height:auto}
#c {
 mix-blend-mode: multiply;
 }

<img src="http://i.imgur.com/BhOHHWT.png"><canvas id=c></canvas>

jquery maphilight plugin - how to keep black colors of image 100% black when hilighted