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

【问题标题】：jquery maphilight plugin - how to keep black colors of image 100% black when hilightedjquery maphilight插件-突出显示时如何使图像的黑色保持100％黑色
【发布时间】：2016-07-01 10:16:51
【问题描述】：

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

wireframe image

如您所见，有一个高亮的半透明区域（由插件生成的html画布元素，正在覆盖线框。问题是，这种半透明颜色正在去除线框线条的100％黑色。

有没有什么技巧可以修复它？可能的解决方案可能是以某种方式设置该区域的混合模式，或者将生成的画布元素放在 png 图像后面，或者设置元素的 z 索引。但是，我对所有列出的想法都没有成功。

【问题讨论】：

标签： jquery canvas maps opacity area

【解决方案1】：

由于画布元素用作叠加元素，您将无法使用上下文混合模式，例如multiply。

幸运的是，您也可以通过 mix-blend 在 CSS 中使用它。您必须获取插件正在使用的 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;
	}

&lt;img src="http://i.imgur.com/BhOHHWT.png"&gt;&lt;canvas id=c&gt;&lt;/canvas&gt;

【讨论】：

【解决方案2】：

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

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

我通常使用它来突出选择文本。 *在您的情况下，将其用于图像或任何打印黑线而不是更改背景的东西。

【讨论】：

我认为这与突出显示地图区域无关，或者？
我从未使用过 maphighlight 插件，所以如果不需要，我无法回答。但我确信它不会改变黑色的不透明度，所以它必须在所有东西上覆盖一个“黄色”层。您可以尝试将这种黄色更改为一种微妙的颜色，并减少不透明度。这将最小限度地改变后面的颜色