Как сделать прозрачный текст на картинке?

Question

[Вася]

Ребята, подскажите пожалуйста реально ли сделать вот такой текст на фоне картинки

Answer 1

[Андрей]

Конечно. Делается масками, туторов в сети множество.
В том числе на хабре.

Comments

[Вася]

А подсказать не могли бы? Там получается два фона, фон в тексте и основной в блоке. Гуглил, но ума так и не дал(

[Андрей]

weban, фон один, в районе текста маска прозрачна, вокруг в полутоне

[Вася]

Спасибо конечно за ответ, но в svg как оказалось я профан( и сделать у меня не получилось нормально.

[Андрей]

weban, спецификация svg в 2 раза больше, чем спецификация html. Быстро не освоить.

[Вася]

Просто макет нарисован так, что я думаю там два фона должно быть, не знаю с какой стороны подступиться.
joxi.ru/823EpyeU6oqZWr
Может подскажите?

Answer 2

[Odisseya]

Можно взять 2 картинки-фона — одну наложить как background для блока, а другую как background для текста.
Пример: https://jsfiddle.net/Odisseya/dj2h06hk/
(в примере для текста использую ту же фоновую картинку, поэтому задала ей смещение)
Альтернативный вариант — использовать css blend modes, но там смотрите поддержку.