I'm trying to recreate a screenshot app to better understand HTML, CSS and Electron and so far I've made a keybind that toggles the overlay of a 0.25 opacity transparent box that fills the screen. And a transparent red outlined box that can be dragged to select an area for the screenshot

As the red box is transparent and is on top of the 0.25 opacity box that fills the screen, the red box has the same opacity as the rest of the screen. I want the area inside the red box to "clear the opacity" so that it is viewed as 0.0 opacity, basically a "bright area" in the red box that looks the same as the screen would without the opacity. Like this

I tried setting the rgba to (0,0,0,0) but that didn't change anything as I expected and I cannot find any documentation for CSS about overlapping elements.

Do you have any idea on how I can implement this?

CodePudding user response：

The first thing that comes to mind for me is a huge box shadow on a transparent element. I don't know how performant this is, but it works.

.screenshot {
  position: fixed;
  top: 50px;
  left: 50px;
  width: 300px;
  height: 100px;
  border: 1px solid red;
  /* large box shadow */
  box-shadow: 0 0 0 max(100vw, 100vh) #0005;
}

<div class='screenshot'></div>