是否可以使用HTML/JS/CSS制作透明窗口？

Question

当用户点击屏幕的给定位置时,我需要创建一个透视窗口,如下所示:

我需要在用户点击的位置突出显示屏幕中的任意区域(具有固定的宽度和高度).

我有两个选择:

1. 使用插件来采取截图(如这些).
2. 创建4个灰色框.

出于不同的原因,我不喜欢这些选项:

1. 这些插件的使用超出了我的需求,并增加了额外的页面加载时间和不希望的复杂性.
2. 管理这些框在未来可能很复杂,浏览器兼容性可能是一个问题.

所以,我的问题是,有没有办法以简单的方式使用HTML(HTML5和canvas是可以的),CSS和Javascript/Jquery？由于我可能忘记维护此代码,因此特定的Jquery插件将是一个选项.

Answer 1

我这样做过一次,我不确定每个人都同意我的实施,但当时它对我有用:

在你想要的位置创建一个div,设置高度和宽度(用于窗口效果); 将div放在您希望的位置,然后只需添加轮廓.

body {
  background-image: url(http://lorempixel.com/800/800/nature/5/);
  background-size: cover;
}
.windowDiv {
  position: absolute;
  top: 100px;
  left: 100px;
  height: 300px;
  width: 300px;
  outline: 4000px solid rgba(0, 0, 0, 0.5);
}

<div class="windowDiv"></div>

编辑:使用背景颜色而不是不透明度.

第二次编辑:因为A.Wolf建议你应该使用轮廓而不是边框​​来更容易定位.