css - 带孔的透明度

Question

我有一个带有叠加层的简单 JQuery 轮播（用于“模糊”非活动幻灯片）。

我希望这张图片能清楚地说明：

我使用这个 HTML 作为覆盖：

<div class="l-overlay-wrapper clearfix">
   <div class="l-overlay">
      <div class="l-overlay-filter">&nbsp;</div>
   </div>
</div>

我使用这个 SASS 来生成我的叠加层：

.l-overlay-wrapper {
  background-color: $white;
  opacity: 0.5;
  position: absolute;
  width: 100%;
  z-index: 5;
  .l-overlay {
    @include rgba-background(rgba(0, 0, 0, 0.97));
    height: 500px;
    .l-overlay-filter {
      background-color: $white;
      height: 500px;
      margin: auto;
      opacity: 0.5;
      width: 640px;
    }
  }
}

其中.l-overlay-filter是“较轻”过滤器，而.l-overlay是背景覆盖。

但这不是我想要的。我希望.l-overlay-filter100% 透明。换句话说，我希望显示原始图像，没有覆盖。

是否可以在透明 div 中制作这个“洞”？
它应该兼容到 IE8。