Javascript 透视暗覆盖css和jquery

我正在做一个带有“隐藏”图像的网站。我使用暗覆盖层隐藏图像，但现在我希望光标能看穿暗覆盖层

下面是一个几乎可行的例子：

我想知道的是，我是如何让浅色的div通过深色的叠加div来显示的。这是可能的，还是应该采用不同的解决方案？有人对此有什么暗示吗

代码如下所示。首先是CSS：

* {
  margin: 0;
  padding: 0;
}

#image {
  background: url(https://placeimg.com/640/480/animals) center no-repeat;
  width: 800px;
  height: 600px;
}

#overlay {
  opacity: 0.9;
  background: #000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
}

#light {
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  background: #fff;
}

jquery如下所示

    $(document).mousemove(function(event) {
    $('#light').offset({
        top: event.pageY - 50,
        left: event.pageX - 50
    });
});

最后是HTML

<div id="image"></div>
<div id="overlay"></div>
<div id="light"></div>

---

可以使用框阴影代替覆盖：

$（文档）.mousemove（函数（事件）{
$（'#light'）。偏移量({
顶部：event.pageY-50，
左：event.pageX-50
});
});
*{
保证金：0；
填充：0；
}
#形象{
背景：url(https://placeimg.com/640/480/animals)中心不重复；
宽度：800px；
高度：600px；
}
#轻的{
不透明度：1；
最高：50%；
左：50%；
宽度：100px；
高度：100px；
边界半径：50%；
位置：绝对；长方体阴影：0.3000px rgba（0,0,0,0.9）；
}
您可以创建一个假图像，并按如下方式计算背景图像的偏移量：

CSS

HTML

随机映像需要具有相同映像的唯一类

为#灯光添加一个大边框，并添加一个负边距：


并移除#覆盖层。
这个方法对我来说似乎是最简单的。
该方法的优点在于不需要支持长方体阴影，也不需要第二个图像元素

另一种方法是将图像的副本放在#light内，并将其向与#light相反的方向移动。
指针事件：无
。当然，您可以使用hudge box阴影代替覆盖！非常感谢你！我将处理box shadow属性。我刚刚意识到您的解决方案在mac上的Safari中不起作用。这就像浏览器由于大小的原因无法正确渲染长方体阴影一样。如果我把尺寸降低到1000像素左右，它就可以工作了。。。你知道怎么处理吗？@Christian你需要一个溢出：隐藏；如果需要，您可以在固定或绝对位置使用额外的包装器。试试这个，或者再次感谢你。不过，您的解决方案并不能解决问题。对不起，再次谢谢你。如果您有其他建议，请更新：）欢迎一切。
* {
  margin: 0;
  padding: 0;
}

.image {
  background: url(https://placeimg.com/640/480/animals) center no-repeat;
}

#image {
  width: 800px;
  height: 600px;
  top:0px;
  left:0px;
}

#overlay {
  opacity: 0.9;
  background: #000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
}

#fakeImage {
  position:absolute;
  width: 800px;
  height: 600px;
}

#light {
  opacity: 1;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  background: #fff;
  overflow:hidden;
}

<div id="image" class="image"></div>
<div id="overlay"></div>

<div id="light" style="display:none;">
  <div id="fakeImage" class="image"></div>
</div>

$(document).mousemove(function(event) {
  $('#light').offset({
    top: event.pageY - 50,
    left: event.pageX - 50
  });
  var _top = (- $('#light').offset().top) + 'px';
  var _left = (- $('#light').offset().left) + 'px';

  $('#fakeImage').css({'top': _top, 'left': _left });

});

.