CSS - Child element see through parent

Question

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 that possible with CSS or with what else ?

score 1 · Accepted Answer · answered Jun 18 '20 at 22:45

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>

So I pretty much split the whole row in 3 different sibling-elements. Thanks for the idea ! — Bill M., Jun 19 '20 at 14:15
No problem! Just mark the question as answered for future users — AJ_, Jun 19 '20 at 14:28

CSS - Child element see through parent

1 Answers1

Linked