Виджет Image и фоновое изображение: в чем разница?
Разберемся, в чем отличия между виджетом Image и Background image и когда лучше использовать каждый из них.
Смотрите видео:
https://vk.com/video-219751701_456239227
Практический пример: Блок-лист с картинками
Например, нам нужно сделать слайдер с карточками, которые будут пролистываться. В каждой карточке должна быть своя уникальная картинка.
Вариант с Background image
Здесь возникает сложность: если добавить карточке фоновое изображение, то оно применится сразу ко всем карточкам. Это происходит потому, что Блок-лист создает общий стиль для всех карточек.
Можно обойти эту проблему, включив независимую структуру для Блок-листа. Тогда можно будет добавить разные фоновые изображения для каждого элемента Блок-листа. Но это сложный способ.
Вариант с виджетом Image
Для нашего примера проще использовать виджет Image. Нужно сделать следующие шаги:
- Добавляем виджет Image в карточку — виджет появляется у всех элементов Блок-листа.
- Настраиваем размеры для Image — 100% ширины и 100% высоты.
- Задаем виджету Image абсолютное позиционирование и нулевые значения координат, чтобы картинка покрывала весь блок.
- У родительского блока задаем относительное позиционирование, чтобы картинка не выходила за его пределы.
- Меняем Z-индекс у текстов (значение 1), чтобы они были поверх изображения.
- По двойному клику на виджете Image добавляем индивидуальные изображения в каждую карточку.
Готово! Мы сделали слайдер с карточками, в которых расположены разные картинки.
Преимущества виджета Image в этом случае:
- Можно выбирать или менять изображение по двойному клику.
- Можно использовать разные изображения внутри всех блоков.
- Даже при создании класса для виджета Image (например, чтобы менять размер сразу у всех изображений), картинки в каждом блоке останутся разными.
Основные отличия виджета Image от Background image
Виджет Image:
- Работает как контейнер для изображения.
- Позволяет использовать разные изображения в однотипных блоках (например, в элементах Блок-листа).
- Изображения можно быстро менять по двойному клику.
- При создании класса для виджета Image меняются только стили, но не само изображение.
Background image:
-
Применяется как фоновое изображение к блоку.
-
Применяется ко всем элементам списка одинаково.
-
Можно использовать настройки отображения (покрытие фона).
Когда что использовать
Используйте виджет Image, когда:
- Создаете много карточек с разными изображениями.
- Нужно быстро менять изображения.
- Требуется гибкая настройка размера картинок в блоках.
Используйте Background image, когда:
- Нужно быстро поставить картинку на весь фон одного объекта (секции или контейнера).
- Требуется точная настройка покрытия фона.
- Нужно добавить затемнение поверх изображения.
Например, вот так можно добавить для контейнера фоновое изображение с полным покрытием и затемнением:
- Добавляем контейнеру фоновое изображение.
- Выбираем настройки отображения фона — Покрывать.
- Добавляем дополнительный фон черного цвета с прозрачностью 30%.
Готово! Для контейнера добавлено фоновое изображение с затемнением.
Резюме
Виджет Image → для однотипных блоков с разными изображениями.
Background image → для единичных фоновых изображений с настройкой покрытия или затемнением.