Виджет Image и фоновое изображение: в чем разница?

Разберемся, в чем отличия между виджетом Image и Background image и когда лучше использовать каждый из них.

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

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

VK Видео | YouTube

Практический пример: Блок-лист с картинками

Например, нам нужно сделать слайдер с карточками, которые будут пролистываться. В каждой карточке должна быть своя уникальная картинка.

Вариант с Background image

Здесь возникает сложность: если добавить карточке фоновое изображение, то оно применится сразу ко всем карточкам. Это происходит потому, что Блок-лист создает общий стиль для всех карточек.

Добавляем фоновое изображение элементу Блок-листа

Во всех карточках получилось одинаковое изображение

Можно обойти эту проблему, включив независимую структуру для Блок-листа. Тогда можно будет добавить разные фоновые изображения для каждого элемента Блок-листа. Но это сложный способ.

Можно применить независимую структуру в настройках Блок-листа

Вариант с виджетом Image

Для нашего примера проще использовать виджет Image. Нужно сделать следующие шаги:

  1. Добавляем виджет Image в карточку — виджет появляется у всех элементов Блок-листа.

  1. Настраиваем размеры для Image — 100% ширины и 100% высоты.

  1. Задаем виджету Image абсолютное позиционирование и нулевые значения координат, чтобы картинка покрывала весь блок.

Абсолютное позиционирование у виджета Image

  1. У родительского блока задаем относительное позиционирование, чтобы картинка не выходила за его пределы.

Относительное позиционирование у элемента Блок-листа

  1. Меняем Z-индекс у текстов (значение 1), чтобы они были поверх изображения.

У текста задаем Z-индекс 1

  1. По двойному клику на виджете Image добавляем индивидуальные изображения в каждую карточку.

Добавляем изображение в виджет Image

Готово! Мы сделали слайдер с карточками, в которых расположены разные картинки.

Преимущества виджета Image в этом случае:

  • Можно выбирать или менять изображение по двойному клику.
  • Можно использовать разные изображения внутри всех блоков.
  • Даже при создании класса для виджета Image (например, чтобы менять размер сразу у всех изображений), картинки в каждом блоке останутся разными.

Основные отличия виджета Image от Background image

Виджет Image:

  • Работает как контейнер для изображения.
  • Позволяет использовать разные изображения в однотипных блоках (например, в элементах Блок-листа).
  • Изображения можно быстро менять по двойному клику.
  • При создании класса для виджета Image меняются только стили, но не само изображение.

Background image:

  • Применяется как фоновое изображение к блоку.

  • Применяется ко всем элементам списка одинаково.

  • Можно использовать настройки отображения (покрытие фона).

Когда что использовать

Используйте виджет Image, когда:

  • Создаете много карточек с разными изображениями.
  • Нужно быстро менять изображения.
  • Требуется гибкая настройка размера картинок в блоках.

Используйте Background image, когда:

  • Нужно быстро поставить картинку на весь фон одного объекта (секции или контейнера).
  • Требуется точная настройка покрытия фона.
  • Нужно добавить затемнение поверх изображения.

Например, вот так можно добавить для контейнера фоновое изображение с полным покрытием и затемнением:

  1. Добавляем контейнеру фоновое изображение.

Добавляем фоновое изображение для контейнера

  1. Выбираем настройки отображения фона — Покрывать.

Настраиваем покрытие блока

  1. Добавляем дополнительный фон черного цвета с прозрачностью 30%.

Затемнение фона — добавляем дополнительный фон с прозрачностью

Готово! Для контейнера добавлено фоновое изображение с затемнением.

Резюме

Виджет Image → для однотипных блоков с разными изображениями.

Background image → для единичных фоновых изображений с настройкой покрытия или затемнением.