透明的儿童div可能吗？

Question

图像是祖父母div,黑色半透明叠加是父div,裁剪部分是子div.用户将看到祖父母图像和父叠加,然后他可以使用子裁剪器div裁剪它.我试过并失败了opacity和rgba背景.

这些疯狂的方法似乎对我有用 -

1. 在子div的背景中设置祖父母图像,然后更改x/ y的background-position.
2. 将孩子和父母组合成一个单独的div,并rgba border用作叠加(我朋友的建议).
3. 在stackoverflow上找到了这个,它使用box-shadow而不是边框​​,看起来像#2的类似方法.

我对#2和#3的轻微抱怨是我需要为虚线边框添加另一个div,以便用户清楚地知道他正在裁剪什么.但我对他们所有人的更大抱怨是,这些都不是正确的方法.

有没有一个合适的/更好的/ 2018-ish /"它如此明显,你这个白痴"的方式来做到这一点？

更新:这是基本标记(如果有助于解决此问题,我也可以使用不同的标记)

#grandparentImage {
  background: url(https://9to5mac.com/wp-content/uploads/sites/6/2018/07/Desert-2.jpg) no-repeat;
  background-size: cover;
  position: relative;
  height: 500px;
}

#parentOverlay {
  background: rgba(0,0,0,0.5);
  height: 100%;
  position: relative;
}

#childCropper {
  border: 1px dashed #ccc;
  left: 50px;
  height: 100px;
  width: 100px;
  position: absolute;
  top: 50px;
}

<div id="grandparentImage">
  <div id="parentOverlay">
    <div id="childCropper"></div>
  </div>
</div>

编辑:这不是标记问题的重复,因为该问题涉及如何抓取裁剪的图像,这个问题涉及如何向用户显示他正在裁剪的内容.更多关于UI而不是数据.

Answer 1

你可以在上面设置带有展开半径的盒子阴影.这样它将始终覆盖屏幕:100vmax#childCropper

#grandparentImage {
  background: url(https://9to5mac.com/wp-content/uploads/sites/6/2018/07/Desert-2.jpg) no-repeat;
  background-size: cover;
  position: relative;
  height: 500px;
}

#childCropper {
  position: absolute;  
  top: 50px;
  left: 50px;
  height: 200px;
  width: 200px;
  border: 1px dashed #ccc;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.5);
}

body {
  margin: 0;
}

<div id="grandparentImage">
  <div id="childCropper"></div>
</div>