Варианты наложения текста на изображение

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

Обычный вариант наложения текста на изображение будет выглядеть так:

Крупный текст
Текст поменьше

1. Затемнить или засветлить все изображение

Для этого нужно добавить всего один слой для изображения

Крупный текст
Текст поменьше

Для засветления стиль: background:rgba(255,255,255,0.3); и соотв. темный текст.

2. Затемнить или засветлить фон за текстом

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

Крупный текст
Текст поменьше

3. Добавить к тексту тень

Самый простой вариант с добавлением всего 1 стиля

Крупный текст
Текст поменьше

На эту тему:

Логотипы на CSS

Несколько примеров оформления логотипов или заголовков для сайта на CSS

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

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