• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Прозрачный текст поверх картинки на CSS (Как написать текст поверх изображения с помощью HTML, CSS)
Прозрачный текст поверх картинки на CSS
Kosten
Дата: Четверг, 2019-11-28, 00:49 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


Отличный вариант вывести текст через изображение, где только задействуем чистые 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;
}

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

Демонстрация
Прикрепления: 3450914.jpg(37.4 Kb) · css-knockout-te.zip(2.6 Kb)
Страна: (RU)
Kosten
Дата: Пятница, 2019-11-29, 20:22 | Сообщение 2
Оффлайн
Администраторы
Сообщений:25244
Награды: 57


Также можете посмотреть этот материал картинка с прозрачным текстом, где аналогично применяется прозрачный текст по темно прозрачном фоне.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Прозрачный текст поверх картинки на CSS (Как написать текст поверх изображения с помощью HTML, CSS)
  • Страница 1 из 1
  • 1
Поиск: