При позиционирование градиента на картинку, исчезает градиент, хотя в stack работает

Question

 .baner-img{
display: flex;
margin: 0 auto;
width: 50%;
height: 50%;

}

.gradient {
    position: relative;

}

.gradient-color {
    width: 100%;
    height: 551px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #0E0E0E 66.15%);
    position: absolute; 
    /* При position: absolute градиент исчезает */
}

<section class="baner">
    <img class="baner-img" src="https://cdn-edge.kwork.ru/pics/t3/23/27100204-64636693aaf80.jpg" alt="">
    <div class="gradient">
        <div class="gradient-color"></div>
    </div>
</section>

Answer 1

.baner {
  width: 660px;
  height: 440px;
  position: relative;
  margin: auto;
}

.baner-img {
  position: absolute;
  width: 50%;
  height: 50%;
  left: 25%;
  top: 2%;
}

.gradient {
  position: absolute;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #0E0E0E 66.15%);
  width: 50%;
  height: 50%;
  left: 25%;
  top: 2%;
}

<section class="baner">
  <img class="baner-img" src="https://cdn-edge.kwork.ru/pics/t3/23/27100204-64636693aaf80.jpg" alt="#">
  <div class="gradient"></div>
</section>

Аноним, я правильно поняла ваше тз?

БЛОГ НА HUSL

При позиционирование градиента на картинку, исчезает градиент, хотя в stack работает

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