Градиент перекрыл шапку сайта

Question

Градиент перекрыл шапку сайта, не могу найти в гугле ничего и идеи кончились. Скрин прилагается, как делал.

Answer 1

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

.header{
  height: 100vh;
  background-image:url('https://cs13.pikabu.ru/post_img/big/2021/02/15/9/1613398780128070124.jpg');
  position: relative;
  
}

.mask {
  position: absolute;
background: linear-gradient(180deg, rgba(224,198,215,1) 0%, rgba(255,254,254,0.46540623085171573) 100%);
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
}

.content {
  position:relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 50px;
}

<div class="header">
  <div class="mask"></div>
  <div class="content">
    <span> sfsf </span>
    <span> sfsfsdfdsfdsf </span>
    <span> 11212112 </span>
    <span> 36ds54f6s </span>
  </div>
</div>

БЛОГ НА HUSL

Градиент перекрыл шапку сайта

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