I find that real code tends to be more complex, but this snippet does a good job of highlighting the issue at hand.
In my setup, there's a background video playing (in this case, just as the background), and on top of that sits a transparent watch face in the shape of a square. The intent is for the viewer to see the background video through the dial. However, I've applied an rgba(0,0,0,0.2) filter to the background video to darken it. Within the watch's dial, I want the original video to show without this effect. I'm not sure if this can be achieved using CSS alone.
So, in this snippet, how can I ensure that the square displays solid black color without simply setting its color? In the actual code, this isn't an option since the square is meant to be transparent with a video passing through it.
.container{
height: 100vh;
width: 100vw;
background-color: rgba(0,0,0,0.2);
display: flex;
justify-content: center;
align-items: center;
}
/* square background should be black, so no opacity on it */
.square{
width: 100px;
height: 100px;
border: 1px solid red;
}<div class="container">
<div class="square"></div>
</div>