My goal is to achieve something similar to 
.
This example image uses 4 semi-transparent black squares, on the right, left, top and bottom to simulate the effect I'm after
使用看起来有点像这样的代码:
.wrapper {
position: relative;
width: 400px;
height: 200px;
}
.overlay {
position: absolute;
background-color: #0005;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.transparent-box {
background-color: #fff0;
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 80px;
}<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<img src="https://picsum.photos/400/200" alt="">
<div class="overlay">
<div class="transparent-box"></div>
</div>
</div>
</body>
</html>I would like to be able to get this effect with while using oneelement for the background and one element making the "window" so that for example adding rounded courners and similar styling could be done easier.
I've tried playing around with blend modes, but I'm not sure if it doesn't support that or if I've just set it up wrong.