CSS - Child Element See Through Parent

I want to make a child element be able to see through its parent, so that the background image is visible inside the child but not the parent element, as in the picture below Is th

Solution 1:

As far as I know, you cant subtract one element from another to create this effect, you have to fake it. Consider the white strip as 3 elements sitting next to each other. The outer ones have a white fill, and the center is transparent. These 3 elements sit inside a wrapper that has a white border (to create the white edges). This effect is demonstrated in the example below.

img {
  width: 100%;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.row {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100px;
  border: 5px solid white;
}

.row .col {
  display: inline-block;
  height: 100%;
  background-color: white;
  width: 100%;
}

.row .col.m {
  background-color: transparent;
  width: 500px;
}

.row .col span {
  color: white;
  text-align: center;
}

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSfz6VkKDw0b3AacQg2PhSq8BpHf1z8Ngg-iYt_1Qqu5cR6Q3_Z&usqp=CAU">

<div class="center row"> 
  <div class="l col"></div>
  <div class="m col">
    <span class="center"> Welcome back, <br> user1! </span>
  </div>
  <div class="r col"></div>
</div>