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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выставьте ему прозрачность, например, 40%.

Резюме

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

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

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