Javascript 使div的映射部分透明

我想在上图中用两个

div

和一个

img

来制作这样的东西。实际上我做了上面的一个，但我必须使用大约6个

div

是否有一种方法可以使用CSS或JavaScript使父

div

的映射区域透明

---

NB:中间的正方形

div

可以拖动和调整大小。

我在这个片段中使用了三个div:background image div、background overlay（用于色调）和裁剪区域

裁剪区域的背景图像设置与背景图像div相同，但背景位置设置为负div位置值

const cropDiv=document.querySelector（“.cropedRegion”）；
设setCropRegion=函数（x1，y1，x2，y2）{
cropDiv.style.backgroundPositionX=`${-x1}px`；
cropDiv.style.backgroundPositionY=`${-y1}px`；
cropDiv.style.width=`${x2-x1}px`；
cropDiv.style.height=`${y2-y1}px`；
cropDiv.style.left=`${x1}px`；
cropDiv.style.top=`${y1}px`；
}
setCropRegion（10,10,240,240）
*{
边际：0px；
}
.背景{
宽度：250px；
高度：250px；
背景图像：url（'https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG');
位置：相对位置；
}
.背景覆盖图{
边际：0px；
填充：0px；
宽度：100%；
身高：100%；
背景色：rgba（255255,0.6）；
}
.裁剪区{
宽度：110px；
高度：80px；
背景图像：url（'https://upload.wikimedia.org/wikipedia/en/e/ed/Nyan_cat_250px_frame.PNG');
背景尺寸：250px 250px；
背景位置：-80px-90px；
位置：绝对位置；
顶部：90px；
左：80px；
}

您是否考虑过使用两个
图像，每个图像的背景相同，但一个图像褪色，另一个尺寸可调？谢谢您的回答。