Как добавить оверлей для изображения, как в Figma?
Расскажем, как добавить оверлей для картинки или сделать режим наложения, как в Figma. Например, поверх фото поставить какой-нибудь полупрозрачный блок с цветом и поэкспериментировать с режимами смешивания.
Смотрите видео:
https://vk.com/video-219751701_456239228
Создание режима наложения цвета
В макете в Figma это работает так: сверху над картинкой у нас стоит фрейм с цветом и режимом наложения Overlay.
Как сделать такой эффект в Taptop:
- Добавьте изображение на фон в div-блок.
- В блок с изображением добавьте еще один div-блок. Залейте его цветом и настройте 100% ширины, 100% высоты и абсолютное позиционирование, чтобы он покрывал родительский блок. Проверьте, что у родительского блока стоит относительное позиционирование.
Получается, что блок с цветом находится поверх изображения и перекрывает его.
- Для блока с цветом добавьте настройку Режим смешивания и выберите значение Перекрытие.
Таким образом у нас получится такой же эффект, как в Figma с параметром Overlay.
Готово! У нас получился эффект наложения цвета на изображение.
Вы также можете играть с эффектами, выбирая другие режимы смешивания из списка.
Создание эффекта затемнения изображения
В Figma мы можем добавить в заливку изображения (Fill) еще один слой черного цвета и выставить прозрачность.
В Taptop эффект затемнения делается аналогичным образом:
- Для div-блока с фоновым изображением — в настройках фона добавьте еще один слой заливки цветом, например, черным.
- Выставьте ему прозрачность, например, 40%.
Готово! Мы сделали эффект затемненного изображения.
Резюме
Два способа создания оверлея для блока с фоновым изображением:
- Дополнительный блок с цветом поверх изображения + режим смешивания.
- Дополнительный цветной слой заливки + прозрачность.