Как изменить цвета текста, который поверх картинки?

Question

[Олег Олегович]

Вот такой эффект нужен



Знаю есть css свойство mix-blend-mode: difference, но картинка не однородна)

Благодарю за подсказку

Comments

[Ankhena]

Полно аналогичных вопросов
Как реализовать шторку на js?
Как реализовать инверсию цвета поверх картинки?

Или
Дублировать текст в дата-атрибут и псевдоэлемент обертки картинки + overflow.
Расположить поверх основного (гридами удобно)

Оччень старая песочница (гридов тогда ещё не было и дубликат текста в контенте(так не надо), но суть должна быть ясна)

Answer 1

[Антон Весельчак]

<div class="hero">
  <h1><span>Путь к совершенству</span><br><strong>начинается в ELA</strong></h1>
</div>
.hero {
  background: url('67fe5b01414da962750250.jpeg') center/cover no-repeat;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 60px;
  text-align: center;
  padding: 50px;
  font-family: sans-serif;
  line-height: 1.2;
}

.hero h1 {
  display: inline-block;
  background: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}