Прозрачный текст на CSS

Свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с нижними слоями.

Его значение multiply — это результат умножения верхнего и нижнего цветов. Черный слой остается черном, а белый не приводит к изменению. Благодаря этому можно сделать прозрачный цвет текста с темным фоном.

HTML:

CSS:

В итоге у нас получится это:

Пример:

Прозрачный текст

Но если мы сделаем фон светлее, например background: #337AB7, то он начнет просвечивать, а белый и вовсе будет прозрачным.

Пример с фоном #337AB7:

Прозрачный текст

Для того, чтобы текст был более заметный, можно добавить к нему тень.

Пример с тенью:

Прозрачный текст

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

Пример c использованием фона для текста:

Еще один вариант сделать текст прозрачным - это наложить на него такой же фон, как и в блоке под ним (см.: Background для текста).

Прозрачный текст
HTML данного варианта:
CSS данного варианта:

Плюсом данного метода является то, что можно использовать любые фоновые изображения и любой цвет рамки.

А минус в том, что текст с заданным ему фоном должен умещаться в 1 строку.

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!