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

Question

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

是的，我需要在用户点击的位置突出显示屏幕中的任意区域（具有固定的宽度和高度）。

我有两个选择：

1. 使用插件截取屏幕截图（例如these）。
2. 创建4个灰色框。

由于各种原因，我不喜欢这些选项：

1. 使用这些插件可以满足我的需求，并增加额外的页面加载时间和不必要的复杂性。
2. 管理这些框将来可能很复杂，浏览器兼容性可能会成为一个问题。

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

Answer 1

我这样做了一次，我不确定每个人都会同意我的实施，但当时它对我有用：

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

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

编辑：使用背景色而不是不透明度。

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