HTML元素中的透明孔

Question

我想设计一个带透明孔的HTML元素。

请查看以下代码：

HTML

function onWidgetChange(e) {
  $.win.backgroundColor = e.value;
}

CSS

<div class="outer">
  <div class="inner"></div>
</div>

https://jsfiddle.net/gpc9aq68/

所以，通过“洞”我想看到HTML正文背景。

在这种情况下，可以通过将“孔”元素颜色设置为灰色来“模拟”。但是，如果背景是图像/视频或只是未知，该怎么办？