Это возможно сделать средствами CSS без каких-либо скриптов и предварительной обработки. Да, технологии не стоят на месте :) Реализация очень простая и не требует даже использования в каком-либо виде популярного в наше время SVG.

Как перекрасить цвет шрифта на фото

Если внимательно читать MDN можно, примерно, понять режимы смешивания и увидеть различия между ними, хотя они практически все одинаковы. Наличие белого текста над изображением дает нам результат, который является инвертированным изображением, где текст перекрывает его. Для простых черно-белых изображений черный в исходном изображении становится белым, где у нас есть белый текст над ним, а белый в исходном изображении становится черным, когда над ним находится белый текст.

Для примера возьмем примитивный HTML код:

<div class="background">
   <h2 contentEditable role='textbox' aria-multiline='true'>
      CSS<br>HTML<span>artkiev.com</span>
   </h2>
</div>

И добавим к нему еще примитивный CSS:

.background {
background: url(super_cat.jpg);
width:800px;
height:450px;
}

h2 {
  color: #FFF;
  mix-blend-mode: difference;
  font: 900 120px/120px Arial;
  text-align: center
}

span {
	display:block;
	font-size:80px
}

Отлично получилось даже без программы Photoshop! И текст, и изображение могут быть изменены, и эффект сохраняется без необходимости какого-либо JavaScript или каких-либо изменений в CSS или SV-масках. Но это подходит для простых изображений. С более сложными необходимо применять дополнительные фильтры и смешивать их.

Например мы можем добавить нашему h2-тегу такой css-фильтр в помощь:

h2 {
filter: invert(1) grayscale(1) contrast(9)
}

Вариантов совместного использования фильтров ограничивает только ваша фантазия и вкус стиля.

Другие публикации: