css3, opacity, bg-image, opacity

Question

Есть блок

.design c bg-image, position=relative>

в нем обертка

div.wrapper_bg_opacity

которому дал белый

bg-color=white & opacity=0.75 position: absolute

на выходе прозрачность есть но: картинки блоке ,wrapper отображаются без прозрачности но текст имеет прозрачность, хотя wrapper_bg_opacity и wrapper на одном уровне стоят.

Пробовал с z-index--ом играться, но что-то не то делаю, мне просто нужно чтоб bg-картинка имела чуть прозрачность, а все что внутри было видно четко

<section class="design">
  <div class="wrapper_bg_opacity"></div>
  <div class="wrapper">
    <h1>For all devices</h1>
    <p class="h2">Unique design</p>
    <hr class="border_line_red">
      <div class="img_bgi">
        <img class="img1" src="img/White1.png" alt="#">
        <img class="img0" src="img/White.png" alt="#">
      </div>
  </div>
<section>

Answer 1

.design {
  width: 300px;
  height: 175px;
  position: relative;
}

.design .wrapper_bg_opacity {
  display: block;
  width: 100%;
  height: 100%;
  background: url('https://i.imgur.com/rN1sNQf.png') no-repeat center center / cover;
  position: absolute;
  opacity: .55;
  z-index: 1;
}

.design .wrapper {
  position: relative;
  z-index: 2;
}

<section class="design">
  <div class="wrapper_bg_opacity"></div>
  <div class="wrapper">
    <h1>For all devices</h1>
    <p class="h2">Unique design</p>
    <hr class="border_line_red">
      <div class="img_bgi">
        <img class="img1" src="img/White1.png" alt="#">
        <img class="img0" src="img/White.png" alt="#">
      </div>
  </div>
<section>

БЛОГ НА HUSL

css3, opacity, bg-image, opacity

Ответы (1 шт):