Как сделать текст с цветом относительно пересечения Bacground'a?

Question

[Raym0NT]

Как это можно реализовать и сделать адаптивно, дабы та часть текста, которая постоянно находится над фотографией была прозрачной с контуром(и в целом с любым другим цветом)?

Comments

[humoured]

Что-то типа -webkit-text-stroke-width и mix-blend-mode?

Answer 1

[ijesusyt]

Чтобы сделать текст с цветом, соответствующим пересечению фона, вы можете использовать свойство CSS mix-blend-mode. Это свойство позволяет указать, как цвета текста и фона должны сочетаться друг с другом.

Например, вы можете использовать свойство mix-blend-mode: screen, чтобы сделать текст прозрачным там, где он пересекается с фоновым изображением. Это позволит фоновому изображению показывать сквозь текст, создавая эффект прозрачности.

Вот пример того, как вы можете использовать свойство mix-blend-mode для создания эффекта прозрачного текста:

.text {
  mix-blend-mode: screen;
  color: #fff;
}

.background {
  background-image: url(...);
}

<div class="background">
  <h1 class="text">Transparent Text</h1>
</div>

Вы также можете использовать CSS-свойство контура, чтобы добавить контур к тексту. Это может помочь сделать текст более разборчивым, когда он накладывается поверх фонового изображения.

Answer 2

[annaozi]

можно считерить последние буквы это будут псевдо елементы у корорыз есть бордер а у другого наклон в последние буквы сделать прозразними а текст на елементях сделать прозрачным