有没有办法让一个半透明的div带有动态放置的“孔”？
有没有办法让一个半透明的div带有动态放置的“孔”？
提问于 2010-09-23 13:58:44
我正在创建一个有两个层的页面:一个图像层和一个在它上面的半透明的“遮罩层”。我想在蒙版上动态地放置一个小的矩形“洞”，这样它下面的原始图像就可以在那个区域看到。
这个是可能的吗？
最后的目的是创造一种灰色图像的效果，当鼠标悬停在某些热点区域时，这些区域变得“生动”。不幸的是，这些区域不是连续的，创建补码的div并不容易。
谢谢!阿米特
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-09-24 06:48:15
好的，这是我找到的一个解决方案。创建一个带有相对定位的包装器div (以捕获热点区域的绝对定位)。把图像放在最底层。在中间层放置一个半透明的div。把所有这些“热区”div(“洞”)放在顶层(绝对定位)，没有背景(完全透明)。然后对于热点区域:hover伪类，使用与底层图像相同的背景图像，并将背景位置设置为-left -top (div绝对位置的负数)。
这将创建所需的效果，即，当悬停在“热区”上时，将显示带有一部分原始图像的灰色图像。
我唯一的希望是，在这么多的div(我有大约50个这样的div)上设置400K图片的背景位置，不会影响浏览器的性能。
Stack Overflow用户
发布于 2010-09-23 14:05:35
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3775769
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号