javascript - 是否可以使用 HTML/JS/CSS 制作一个透 window 口？

Question

当用户点击屏幕的给定位置时，我需要制作一个透明窗口，如下所示:

就是，我需要在用户点击的位置高亮显示屏幕中的任意区域(具有固定的宽度和高度)。

我有两个选择:

1. 使用插件截取屏幕截图(例如 these )。
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 建议的那样，您应该使用轮廓而不是边框​​以便于定位。