在图像上覆盖div，如何使div部分透明，部分灰显？

Question

我正在我的移动应用上创建一个可以裁剪图像的页面。

我想做的是在我的图像上叠加一个div。此div将在其中包含一个框，该框应该是透明的，以便您可以看到要保留的图像部分。在框外，我希望图像有阴影。

下面的图片是我想要做的一个例子，除了花哨的边框，我可以只有一个普通的边框。

这可以用css或javascript吗？

（Ps我知道下面是一个软件程序，但想象一下图片是html，这就是我想要完成的事情）

Answer 1

你最好的选择是在整个地区使用4个div和一个rgba（0,0,0，.5）

Answer 2

非常有趣的问题，但不幸的是，没有简单的方法使用HTML / CSS。有几个建议的解决方案你可以通过谷歌搜索找到这样的Make part of a image transparent，但我真的不能理解这个解决方案。

所以我怎么继续这个，可能最简单的解决方案是最初让所有图像变灰（低不透明度），然后当用户通过给出x，y，宽度来绘制顶部的div时， height ..然后在该div中，使用x，y，width和height的值显示具有正常不透明度的同一图像的裁剪部分..您可以获得要在div中显示的图像的确切部分。为此，以下主题将帮助您：

CSS Display an Image Resized and Cropped

Idk这种方法有多么有用，但这是一种方法，或者至少我会这样做。