активные ссылки под градиентом

Question

Есть некий блок с фоном (background-color) c z-index=1, у него есть псевдоэлемент с градиентом (background: linear-gradient) c z-index=2. Внутри блока - несколько ссылок. Проблема в том что ссылки не активны ни при каком z-index выставляемом им. Есть ли возможность сделать элементы активными под градиентом?

.el {
  height: 400px;
  width: 100%;
  background-color: #f7f8fa;
  position: relative;
  z-index: -1;
}

.el::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, #F7F8FA 0%, rgba(247, 248, 250, 0) 16.78%, 
  rgba(247, 248, 250, 0) 82.64%, #F7F8FA 100%);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.el-a {
  z-index: 50;
}

<div class="el">
  <div class="el-a">
    <a href="#">Первая ссылка</a>
    <a href="#">Вторая ссылка</a>
    <a href="#">Третья ссылка</a>
  </div>
</div>

Answer 1

Если есть возможность, то лучше использовать -webkit-text-fill-color и -webkit-background-clip. Поддерживают все браузеры.

.el {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 255, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="el">
  <a href="#">Первая ссылка</a>
  <a href="#">Вторая ссылка</a>
  <a href="#">Третья ссылка</a>
</div>

БЛОГ НА HUSL

активные ссылки под градиентом

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