Сделать div прозрачным через родительский div

Question

Я пытаюсь сделать div поверх изображения и внутри этого div, чтобы иметь рамку или другой прозрачный div, чтобы вы могли видеть изображение ниже.

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;
}

.floater {
  width: 400px;
  height: 100px;
  background: blue;
}

.title,
.description {
  padding: 10px
}

.transparent-through {
  border-bottom: 4px solid black;
  width: 90%;
  margin: auto;
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="transparent-through"></div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Я пытаюсь сделать прозрачный задний div прозрачным, чтобы вы могли видеть изображение под родительским div.

и пример здесь:

Answer 1

Вы можете использовать несколько фонов, используя linear-gradient для создания прозрачной детали без необходимости использования дополнительного элемента:

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  width: 400px;
  background: 
  linear-gradient(blue,blue) 0 0/100% 50px no-repeat,
  linear-gradient(blue,blue) 0 100%/100% 50px no-repeat,
  linear-gradient(blue,blue) 0 0/50px 100% no-repeat,
  linear-gradient(blue,blue) 100% 0/50px 100% no-repeat;
 
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Вот более хитрая идея с использованием clip-path:

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  width: 400px;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 29%, 75% 29%, 75% 69%, 20% 69%, 20% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 29%, 75% 29%, 75% 69%, 20% 69%, 20% 100%, 100% 100%, 100% 0%);
  background:blue;
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Еще один, использующий вставку box-shadow:

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  width: 400px;
  box-shadow:0 0 0 50px blue inset;
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Вы также можете рассмотреть псевдоэлемент с границами:

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  position:relative;
  width: 400px;
  z-index:0;
}
.floater:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-width:50px 20px 50px 20px;
  border-style:solid;
  border-color:blue;
  z-index:-1;
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Answer 2

Создайте синий фон как тень прозрачного элемента.

Установить переполнение скрытым на поплавке, чтобы предотвратить его расширение наружу

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  margin-top: 20px;
  width: 400px;
  height: 150px;
  overflow: hidden;
}

.title,
.description {
  padding: 10px
}

.transparent-through {
  height: 60px;
  width: 90%;
  margin: auto;
  box-shadow: 0px 0px 0px 100px blue;
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="transparent-through"></div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Answer 3

Трик мог бы нарисовать цвет фона из тени от вашего элемента границы. (см. Комментарии css)

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  width: 400px;
  height: 100px;
  overflow: hidden; /*keep children shadow inside*/
  margin: auto
}

.title,
.description {
  padding: 10px;
  position: relative; /* on top of sibblings shadows*/
}

.transparent-through {
  border-bottom: 4px solid transparent;
  box-shadow: 0 0 0 100px blue; /* tune color and area to fill unblured. here set to blue and 100px around */
  width: 90%;
  margin: auto;
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="transparent-through"></div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Answer 4

сделать родительскую позицию div: относительной и z-index: 0 и сделать дочернюю позицию div: абсолютной и z-index: 10

это пример, следуйте этому примеру, вы можете сделать это.

.check
{
position:relative;
width:100%;
height:50%:
z-index:0;
}
.check img
{
width:100%;
height:50%;
}
.form-box
{
    position: absolute;
    top:0;
    right:0;
    background-color:rgba(255,255,255,0.8);
    z-index:10;
    height:100%;
    padding-top:40px;
    width:50%;
}

<html>
<div class="check">
<img src="https://cdn.vox-cdn.com/thumbor/th5YNVqlkHqkz03Va5RPOXZQRhA=/0x0:2040x1360/1200x800/filters:focal(857x517:1183x843)/cdn.vox-cdn.com/uploads/chorus_image/image/57358643/jbareham_170504_1691_0020.0.0.jpg">
</div>
<div class="form-box">
<h1>BISWAJIT</h1>
</div>