Как добавить оверлей для изображения, как в Figma?

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

Пример оверлея для изображения

Смотрите видео:

https://vk.com/video-219751701_456239228

VK Видео | YouTube

Создание режима наложения цвета

В макете в Figma это работает так: сверху над картинкой у нас стоит фрейм с цветом и режимом наложения Overlay.

Оверлей в Figma

Как сделать такой эффект в Taptop:

  1. Добавьте изображение на фон в div-блок.

Изображение на фоне блока

  1. В блок с изображением добавьте еще один div-блок. Залейте его цветом и настройте 100% ширины, 100% высоты и абсолютное позиционирование, чтобы он покрывал родительский блок. Проверьте, что у родительского блока стоит относительное позиционирование.


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

Блок с цветом и абсолютным позиционированием

  1. Для блока с цветом добавьте настройку Режим смешивания и выберите значение Перекрытие.


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

Выбираем Режим смешивания → Перекрытие

Готово! У нас получился эффект наложения цвета на изображение.

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

Варианты режима смешивания

Создание эффекта затемнения изображения

В Figma мы можем добавить в заливку изображения (Fill) еще один слой черного цвета и выставить прозрачность.

Дополнительный слой заливки с прозрачностью в Figma

В Taptop эффект затемнения делается аналогичным образом:

  1. Для div-блока с фоновым изображением — в настройках фона добавьте еще один слой заливки цветом, например, черным.
  2. Выставьте ему прозрачность, например, 40%.

Дополнительный слой заливки с цветом и прозрачностью

Готово! Мы сделали эффект затемненного изображения.

Резюме

Два способа создания оверлея для блока с фоновым изображением:

  • Дополнительный блок с цветом поверх изображения + режим смешивания.
  • Дополнительный цветной слой заливки + прозрачность.