Вдавленный или рельефный текст на картинке.
 

Всем привет. Спецы подскажите есть ли возможность сделать
текст на картинке, чтобы этот текст выглядел на ней как вдавленный или как рельефный, только чтобы какой-либо другой фон отсутствовал.
Искал в инете подобные примеры ничего не нашёл. Всем
спасибо.

Можно упростить пример
https://javascript.ru/forum/dom-wind...tml#post516183

III, вы можете достигнуть такого эффекта, совмещая вместе такие свойства, как mix-blend-mode, text-shadow, background.

Например, вдавленный текст...

<figure>
	<figcaption>Hi, you all!</figcaption>
	<img src="https://picsum.photos/id/863/640/480">
</figure>

<style>

figure {
	position: relative;
	display: inline-block;
}

figure figcaption {
	position: absolute;
	top: 0; bottom: 0;
	right: 0; left: 0;
	margin: auto;
	width: max-content;
	height: max-content;
	font: 900 500% system-ui;
	/* далее вдавленный текст */
	color: transparent;
	background: rgb(0, 0, 0, 1);
	mix-blend-mode: multiply;
 	-webkit-background-clip: text;
	   -moz-background-clip: text;
	        background-clip: text;
	text-shadow:
		-1px 1px 1px rgba(255, 255, 255, 0.25),
		-5px 5px 5px rgba(255, 255, 255, 0.75)
}
	
</style>

(Этот пример почему-то не работает в Firefox)

ЕЩЁ Более короткий код... (работает в Firefox)

<figure>
	<figcaption>Hi, you all!</figcaption>
	<img src="https://picsum.photos/id/863/640/480">
</figure>

<style>

figure {
	position: relative;
	display: inline-block;
}

figure figcaption {
	position: absolute;
	top: 0; bottom: 0;
	right: 0; left: 0;
	margin: auto;
	width: max-content;
	height: max-content;
	font: 900 500% system-ui;
	mix-blend-mode: multiply;
	color: transparent;
	text-shadow: -5px 5px 10px white, 0 0 0 #222;
}
	
</style>

Огромное спасибо за примеры. Будем пользоваться.