Доверьте продвижение нам

Lion Digital Agency

интернет-маркетинг

теги:

Категории

Рубрики

Настройка и сопровождение рекламного кабинета во Вконтакте.

от 14000 

Хотите получать заявки моментально? Вся наша команда и партнеры приступят к проекту, подключив также продвижение Авито. Подходит для тех, кого не удовлетворяет имеющийся объем продаж. Разработка сайта компании/каталог/магазин + Яндекс Директ / ВК реклама + СЕО продвижение + Авито продвижение.

от 189000 

Настройка и сопровождение рекламного кабинета Яндекс Директ.

от 14000 

Как сделать картинку внутри картинки css

Сделать картинку внутри картинки в CSS можно, используя свойство background-image и позиционирование фонового изображения.

  1. Установка основного изображения Сначала необходимо установить основное изображение как фоновое изображение элемента.
div {
  background-image: url('main-image.jpg');
  background-size: cover;
}
  1. Добавление изображения внутри основного Чтобы добавить внутреннее изображение, необходимо добавить еще одно свойство background-image и определить его позицию с помощью background-position.
div {
  background-image: url('main-image.jpg'),
                    url('inner-image.jpg');
  background-size: cover, auto;
  background-position: center center, 50% 50%;
  background-repeat: no-repeat, no-repeat;
}

В этом примере мы задаем два фоновых изображения: основное — ‘main-image.jpg’ и внутреннее — ‘inner-image.jpg’. Основное изображение настраивается на автоматическое заполнение элемента и позиционируется по центру. Внутреннее изображение настраивается на свой размер и позиционируется на 50% по горизонтали и вертикали. Оба изображения не повторяются в элементе.

  1. Установка размеров внутреннего изображения Если размеры внутреннего изображения известны и они меньше размеров основного изображения, то можно использовать background-size для изменения размеров фоновых изображений.
div {
  background-image: url('main-image.jpg'),
                    url('inner-image.jpg');
  background-size: cover, 200px;
  background-position: center center, 50% 50%;
  background-repeat: no-repeat, no-repeat;
}

В этом примере мы задали размеры внутреннего изображения 200px, задав background-size второго изображения со значением 200px.

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

Поделиться:

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Меню

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.