Javascript 是否可以使用透明子分区？

图像是祖父母div，黑色半透明覆盖层是父div，裁剪部分是子div。用户将看到祖父母图像和父覆盖层，然后他可以使用子裁剪器div进行裁剪。我尝试了

不透明度
和
rgba
背景，但失败了

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

在子div的背景中设置祖父母图像，然后更改
背景位置的
x
/
y

将子级和父级合并为一个单独的div，并使用
rgba
border
作为覆盖（我朋友的建议）
可以在stackoverflow上找到，它使用
框阴影
而不是边框，看起来类似于#2
我对#2和#3的不满是，我需要为虚线边框添加另一个div，以便用户清楚地知道他正在裁剪什么。但我对他们更大的不满是，这些都不是正确的方法

有没有合适的/更好的/2018 ish/“太明显了，你这个白痴”的方法

更新：以下是基本标记（如果有助于解决此问题，我也可以使用不同的标记）


#祖父母形象{
背景：url(https://9to5mac.com/wp-content/uploads/sites/6/2018/07/Desert-2.jpg)不重复；
背景尺寸：封面；
位置：相对位置；
高度：500px；
}
#父覆盖{
背景：rgba（0,0,0,0.5）；
身高：100%；
位置：相对位置；
}
#儿童修剪工{
边框：1px虚线#ccc；
左：50px；
高度：100px；
宽度：100px；
位置：绝对位置；
顶部：50px；
}

叠加div（概念验证）


.parent，
.孩子{
背景图片：url(https://scontent-lht6-1.cdninstagram.com/vp/0f18c710d8dc3ebd48819b3f9f44b5cc/5C28EE7E/t51.2885-15/e35/29094825_1798384780455300_8914767740305145856_n.jpg?se=7&ig_cache_key=MTc0MDQ5MzIwMjE5OTYyODM5MQ%3D%3D.2);
背景尺寸：包含；
}
.家长{
高度：1072px；
宽度：1072px；
不透明度：0.3
}
.孩子{
位置：绝对位置；
顶部：150px；
左：20px；
高度：200px；
宽度：500px；
背景位置：-20px-150px；
背景尺寸：1072px 1072px
}
这似乎是伪元素的完美工作。因此，这个解决方案是对问题中的#2建议的升级，但它没有使用元素本身，而是使用
：after
：


#祖父母形象{
背景：url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg/800px-%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F.%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5%D0%BB%D1%83%D1%87%D0%B8%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg）不重复；
背景尺寸：封面；
位置：相对位置；
高度：500px；
溢出：隐藏；
z指数：1；
}
#儿童修剪工{
边框：2个虚线#ccc；
位置：绝对位置；
顶部：50px；
左：50px；
高度：200px；
宽度：200px；
}
#儿童裁剪师：之后{
内容：“；
宽度：100%；
身高：100%；
边框：1000px固体rgba（0,0,0,0.5）；
位置：绝对位置；
顶部：-1000px；
左：-1000px；
z指数：-1；
}
我猜这就是你想要的：


覆盖遮罩{
背景色：rgba（0,0,0,65）；
剪辑路径：多边形（0%0%、75%0%、75%25%、25%25%、25%75%、75%75%、75%0%、100%0%、100%100%、01100%）；
z指数：1；
指针事件：无；
/*rest是可选的，您可以使用
*'position:absolute`将其放置在带有'relative'的父对象中
*/
位置：固定；
顶部：0；底部：0；左侧：0；右侧：0；
}
身体{
保证金：0；
背景：url（“https://loremflickr.com/800/600）无重复中心/盖；
最小高度：100vh；
}
您可以在
#childcrapper
上设置
100vmax
扩展半径。这样，它将始终覆盖屏幕：


#祖父母形象{
背景：url(https://9to5mac.com/wp-content/uploads/sites/6/2018/07/Desert-2.jpg)不重复；
背景尺寸：封面；
位置：相对位置；
高度：500px；
}
#儿童修剪工{
位置：绝对位置；
顶部：50px；
左：50px；
高度：200px；
宽度：200px；
边框：1px虚线#ccc；
盒影：0.100V最大rgba（0,0,0,0.5）；
}
身体{
保证金：0；
}
这里是另一种方法，它只使用一个元素，您可以依靠渐变和多重背景来创建裁剪覆盖和虚线边框：


#祖父母形象{
--g：线性梯度（rgba（0,0,0,0.5），rgba（0,0,0,0.5））；
--t：重复线性渐变（向右，#ccc0，#ccc2px，透明2px，透明4px）；
--b：重复线性渐变（到底部，#ccc0，#ccc2px，透明2px，透明4px）；
背景图像：
/*边界*/
var（--t）、var（--t）、var（--b）、var（--b），
/*覆盖层*/
var（--g），var（--g），var（--g），var（--g），
/*形象*/
网址(https://picsum.photos/1000/800?image=1069);
背景尺寸：
/*边界*/
40%2px，40%2px，2px 40%，2px 40%，
/*覆盖层*/
100% 30%,100% 30%,20% 40%, 40% 40%,
/*形象*/
掩护；
背景位置：
/*边界*/
33.33%30%，剩下33.33%底部30%，20%50%，60%50%，
/*覆盖层*/
上，下，左中，右中，
/*形象*/
居中
背景重复：无重复；
位置：相对位置；
高度：100vh；
}
身体{
保证金：0；
}

您能否提供一些基本标记，以便我们使用它进行测试？您可以使用两个div，一个作为背景（不透明度较低），一个在前面，具有背景位置，仅显示选定的部分。您使用两个图像的第一种方法是此任务的众所周知的解决方案，并且在大多数情况下都会使用