我正在创建一个包含2层的页面：图像层和顶部的“蒙版”层，它是半透明的。我想在该面具中动态放置一个小矩形“孔”，以便在该区域中可以看到它下面的原始图像。
这可能吗？
最终目的a是创建灰色图像的效果，当鼠标悬停在某些热区域上时，这些区域变得“生动”。不幸的是，这些区域不是连续的，并且创建补充的div也不容易。
谢谢！阿米特
答案 0 :(得分：1)
答案 1 :(得分：0)
好的，这是我发现的一个解决方案。 创建一个具有相对定位的包装div（以捕获热区域的绝对定位）。 将图像放在底层。 在中间层放置一个半透明div。 将所有那些“热区”div（“孔”）放在顶层（绝对定位），没有背景（完全透明）。然后对于热区域：hover伪类，使用与底层图像相同的背景图像，并将背景位置设置为-left -top（div的绝对位置的负数）。
这将创建所需的效果，即当悬停在“热区”时显示原始图像的一部分的灰显图像。
我唯一的希望是它不会搞砸浏览器性能，因为在这么多div上设置400K图像的背景定位（我有大约50个）...