Javascript 有没有一种方法可以使半透明div具有动态放置的“；“洞”；

我正在创建一个包含两层的页面：一个图像层和一个半透明的“遮罩”层。我想在遮罩中动态地放置一个小的矩形“洞”，这样可以在该区域看到它下面的原始图像

这可能吗

最终目的是创建一个灰显图像效果，当鼠标悬停在某些热点区域时，这些区域变得“生动”。不幸的是，这些区域不是连续的，创建补码的div也不是很容易

谢谢！阿米特

像这样的事

像这样的东西

---

好的，我找到了一个解决方案。 创建一个具有相对定位的包装器div（捕捉热点区域的绝对定位）。 将图像放在底层。 在中间层放一个半透明的div。 将所有这些“热区域”分区（“孔”）放在顶层（绝对定位），没有背景（完全透明）。然后对于hot areas'：hover pseudo类，使用与底层图像相同的背景图像，并将背景位置设置为-left-top（div绝对位置的负数）

这将创建所需的效果，即当鼠标悬停在“热点区域”上时，显示一部分原始图像的灰显图像

---

我唯一的希望是，在如此多的div上设置400K图像的背景位置不会影响浏览器性能（我有大约50个这样的div）

好的，我找到了一个解决方案。 创建一个具有相对定位的包装器div（捕捉热点区域的绝对定位）。 将图像放在底层。 在中间层放一个半透明的div。 将所有这些“热区域”分区（“孔”）放在顶层（绝对定位），没有背景（完全透明）。然后对于hot areas'：hover pseudo类，使用与底层图像相同的背景图像，并将背景位置设置为-left-top（div绝对位置的负数）

这将创建所需的效果，即当鼠标悬停在“热点区域”上时，显示一部分原始图像的灰显图像

---

我唯一的希望是，它不会因为在这么多div上设置400K图像的背景位置而影响浏览器性能（我有大约50个div）

谢谢griegs。这与我想做的有些相似。然而，jcrop示例只涉及1个透明div。在本例中，找到创建补码并使其半透明的4个div相对简单。但是如果我有很多造成这些洞的“热点区域”，那么动态计算补码就比较困难了。@user455826，是的，我同意，但我不相信你会找到其他的补码。您可能需要修改此插件以获得所需的结果。我将研究它是如何实现的。谢谢你的领导！谢谢格里格斯。这与我想做的有些相似。然而，jcrop示例只涉及1个透明div。在本例中，找到创建补码并使其半透明的4个div相对简单。但是如果我有很多造成这些洞的“热点区域”，那么动态计算补码就比较困难了。@user455826，是的，我同意，但我不相信你会找到其他的补码。您可能需要修改此插件以获得所需的结果。我将研究它是如何实现的。谢谢你的领导！