有没有办法制作一个带有动态放置“孔”的半透明div？
我正在创建一个包含 2 层的页面：图像层和其上的半透明“蒙版”层。我想在该蒙版中动态放置一个小矩形“孔”，以便在该区域可以看到其下方的原始图像。
这可能吗？
最终目的 a 是创建灰色图像的效果，当鼠标悬停在某些热点区域上时，这些区域会变得“生动”。不幸的是，这些区域不是连续的，并且创建补集的 div 并不容易。
谢谢！阿米特
I'm creating a page with 2 layers: an image layer and a "mask" layer on top of it which is semi transparent. I want to dynamically place a small rectangle "hole" in that mask so that the original image below it could be seen in that area.
Is this possible?
The final purpose a is to create an effect of a grayed out image that when the mouse hovers over certain hot areas these areas become "vivid". Unfortunately these areas are not consecutive and it is not too easy to create the div of the complement.
Thanks! Amit
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
像这样的事吗？
http://deepliquid.com/projects/Jcrop/demos.php
Some thing like this?
http://deepliquid.com/projects/Jcrop/demos.php
好的，这是我找到的一种解决方案。
创建一个具有相对定位的包装 div（以捕获热点区域的绝对定位）。
将图像放在底层。
在中间层放一个半透明的div。
将所有这些“热点区域”div（“洞”）放在顶层（绝对定位），没有背景（完全透明）。然后对于热点区域的 :hover 伪类，使用与底层图像相同的背景图像，并将背景位置设置为 -left -top （div 绝对位置的负数）。
这将创建所需的效果，即，当鼠标悬停在“热区域”上时，会显示灰色图像，并显示原始图像的一部分。
我唯一的希望是，在如此多的 div 上设置 400K 图像的背景定位时，它不会破坏浏览器性能（我有大约 50 个）。
OK, here is one solution I found.
Create a wrapper div with relative positioning (to catch the absolute positioning of the hot areas).
Put the image on the bottom layer.
Put a semi transparent div on the middle layer.
Put all those "hot area" divs ("holes") on the top layer (absolute positioning), with no background (fully transparent). Then for the hot areas' :hover pseudo class, use background image the same as the image at the bottom layer, and set the background position to be -left -top (the negatives of the absolute position of the divs).
This will create the desired effect, i.e. a grayed out image with a portion of the original image displayed when hovering on the "hot area".
My only hope is that it doesn't screw up browser performance for setting the background positioning of a 400K image on so many divs (I have around 50 of those)..