Как сделать блок который будет инверсировать цвет находящийся над ним?

Question

Нужно сделать чтобы элемент, который будет добавляться как псевдоэлемент (в данном случае картинка) мог инверсировать цвет текста относительно своего расположения как показано на скриншоте:

Скриншот

Answer 1

Это можно решить вот таким методом:

h1 {
  position: relative;
  mix-blend-mode: multiply;
  background: url("https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg") 80% 50% no-repeat;
  z-index: 2;
}

h1:after {
  position: absolute;
  right: 0;
  top: 0;
  content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit." 
           "Delectus similique optio maxime corrupti illum veniam harum dolor quidem eius."
           "Deleniti.";
  filter: grayscale(1) brightness(1000%);
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

<div class="block">
  <p>Apr 30, 2022 </p>
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Delectus similique optio maxime corrupti illum veniam harum dolor quidem eius. 
      Deleniti.</h1>
  <a href="#">Read More</a>
</div>

БЛОГ НА HUSL

Как сделать блок который будет инверсировать цвет находящийся над ним?

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