Отличный вариант вывести текст через изображение, где только задействуем чистые CSS. Так как здесь мы изначально помещаем все режимы смешивания для выбора. Все для того, чтобы отображает визуальный эффект на разных цветах ввода. Где разберем, как добавить прозрачный текст поверх изображения с помощью CSS.
Когда разместив материал про прозрачный текст относительно фона, то нашел еще одну вариацию со знаком, где больше подходит под второй вариант, так как спецификации действительно хорошо объясняют весь процесс, где каждый из режимов смешивания дает вам графический пример, виде написанных знаков.
Вот что я хотел бы сделать, чтобы получить результат.
Идея состоит в том, чтобы просто наложить некоторый текст поверх изображения,
Установочный процесс:
HTML
Код
<div class="kanding-mogudes">
<p class="nesvulan">ZORNET.RU</p>
</div>
CSS
Код
.kanding-mogudes {
background: url("http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/Tait20by20Jezael20Melgoza.jpg") center;
background-size: contain;
margin: auto;
width: 75vw;
}
.nesvulan {
color: white;
border: 4px solid;
background: rgb(59, 2, 6);
mix-blend-mode: multiply;
font: bolder 12vw 'Alfa Slab One';
text-align: center;
margin: 0;
}
Если вам нужен произвольный цвет, который не зависит от этих входных цветов, то просто ставим тот оттенок, который больше подойдет по дизайну, а значит станет ярче смотреться. Но когда идет простые фоны, которые содержат различные рисунки, то смотрится намного оригинальнее от одного тона цветовой гаммы.
Демонстрация
