Множественные фоновые изображения: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

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

Список тем

Добавление двух фоновых изображений

Ваша задача — добавить два фоновых изображения к элементу `div`. Первое изображение должно быть '1.png', а второе — '2.png'. Используйте свойство, предназначенное для указания URL фоновых изображений.

CSS

.container {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  /* Добавьте два фона */
  input1: url("https://naytikurs.ru/img/1.png") input2 url("https://naytikurs.ru/img/2.png");
}

                     .container {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  /* Добавьте два фона */
  input1: url("https://naytikurs.ru/img/1.png") input2 url("https://naytikurs.ru/img/2.png");
}

HTML

<div class="container"></div>

Чтобы добавить несколько фоновых изображений, используйте свойство `background-image`. Перечислите URL изображений через запятую. Порядок важен: первое указанное изображение будет находиться поверх остальных.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Управление повторением фонов

К элементу уже добавлены два фоновых изображения ('4.png' и '5.png'). Сделайте так, чтобы первое изображение ('4.png') не повторялось, а второе ('5.png') повторялось только по горизонтали. Используйте соответствующее CSS свойство.

CSS

.container {
  width: 350px;
  height: 300px;
  border: 1px solid #ccc;
  background-image: url("https://naytikurs.ru/img/4.png"), url("https://naytikurs.ru/img/5.png");
  /* Укажите правила повторения */
  input1: input2, input3;
}

                     .container {
  width: 350px;
  height: 300px;
  border: 1px solid #ccc;
  background-image: url("https://naytikurs.ru/img/4.png"), url("https://naytikurs.ru/img/5.png");
  /* Укажите правила повторения */
  input1: input2, input3;
}

HTML

<div class="container"></div>

Для управления повторением каждого фонового изображения используется свойство `background-repeat`. Значения для каждого фона перечисляются через запятую в том же порядке, что и изображения в `background-image`. Используйте значения `no-repeat` (не повторять) и `repeat-x` (повторять по горизонтали).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Позиционирование фоновых изображений

Два фоновых изображения ('6.png' и '7.png') добавлены. Расположите первое изображение ('6.png') в верхнем левом углу, а второе ('7.png') — в правом нижнем углу элемента. Используйте свойство для позиционирования фонов.

CSS

.container {
  width: 320px;
  height: 300px;
  border: 1px solid #ccc;
  background-image: url("https://naytikurs.ru/img/6.png"), url("https://naytikurs.ru/img/7.png");
  background-repeat: no-repeat, no-repeat; /* Фоны не повторяются для наглядности */
  /* Задайте позиции фонам */
  input1: input2, input3;
}

                     .container {
  width: 320px;
  height: 300px;
  border: 1px solid #ccc;
  background-image: url("https://naytikurs.ru/img/6.png"), url("https://naytikurs.ru/img/7.png");
  background-repeat: no-repeat, no-repeat; /* Фоны не повторяются для наглядности */
  /* Задайте позиции фонам */
  input1: input2, input3;
}

HTML

<div class="container"></div>

Свойство `background-position` позволяет задать начальное положение каждого фонового изображения. Значения для каждого фона перечисляются через запятую. Используйте ключевые слова, такие как `left top`, `right bottom`, `center` и т.д.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Краткая запись для одного слоя фона

Используя краткое свойство `background`, добавьте фоновое изображение '8.png', расположите его по центру и сделайте так, чтобы оно не повторялось.

CSS

.container {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  /* Используйте краткую запись */
  input1: url("https://naytikurs.ru/img/8.png") input2 input3;
}

                     .container {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  /* Используйте краткую запись */
  input1: url("https://naytikurs.ru/img/8.png") input2 input3;
}

HTML

<div class="container"></div>

Краткое свойство `background` позволяет задать несколько параметров фона одновременно: цвет, изображение, позицию, размер, повторение, способ прикрепления и область отрисовки. Для задания изображения, позиции (`center`) и повторения (`no-repeat`) в одной строке, перечислите значения через пробел. Порядок (кроме position/size) обычно не строгий, но рекомендуется придерживаться стандартного: `background: url(...) position / size repeat attachment origin clip color;`

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Краткая запись для нескольких слоев фона

Используя краткое свойство `background`, добавьте два фоновых слоя. Первый слой: изображение '1.png', расположенное слева по центру, без повторения. Второй слой: изображение '9.png', расположенное справа по центру, повторяющееся только по вертикали.

CSS

.container {
  width: 350px;
  height: 300px;
  border: 1px solid #ccc;
  /* Добавьте два слоя фона через запятую */
  background: url("https://naytikurs.ru/img/1.png") input1 no-repeat input2 
              url("https://naytikurs.ru/img/9.png") input3 repeat-y;
}

                     .container {
  width: 350px;
  height: 300px;
  border: 1px solid #ccc;
  /* Добавьте два слоя фона через запятую */
  background: url("https://naytikurs.ru/img/1.png") input1 no-repeat input2 
              url("https://naytikurs.ru/img/9.png") input3 repeat-y;
}

HTML

<div class="container"></div>

Для задания нескольких слоев фона с помощью краткого свойства `background`, перечислите определения для каждого слоя через запятую. Каждый слой описывается так же, как в предыдущем задании (URL, позиция, повторение и т.д.). Помните про порядок слоев: первый указанный слой будет наверху.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Управление размером фоновых изображений

Добавлены два фона ('2.png' и '4.png'). Используя свойство `background-size`, сделайте так, чтобы первое изображение ('2.png') полностью помещалось внутри контейнера, сохраняя пропорции (`contain`), а второе ('4.png') полностью покрывало контейнер, также сохраняя пропорции (`cover`).

CSS

.container {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  background-image: url("https://naytikurs.ru/img/2.png"), url("https://naytikurs.ru/img/4.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  /* Задайте размеры фонам */
  input1: input2, input3;
}

                     .container {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  background-image: url("https://naytikurs.ru/img/2.png"), url("https://naytikurs.ru/img/4.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  /* Задайте размеры фонам */
  input1: input2, input3;
}

HTML

<div class="container"></div>

Свойство `background-size` управляет размером фоновых изображений. Значения для каждого слоя перечисляются через запятую. Используйте ключевые слова `contain` (масштабирует изображение так, чтобы оно целиком поместилось в контейнер) и `cover` (масштабирует изображение так, чтобы оно полностью покрыло контейнер, возможно, обрезая часть изображения).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Область позиционирования фона

К элементу с рамкой и внутренним отступом добавлены два фона ('5.png' и '6.png'). Сделайте так, чтобы позиционирование первого фона ('5.png') отсчитывалось от края рамки (`border-box`), а второго ('6.png') — от края внутреннего отступа (`padding-box`).

CSS

.container {
  width: 300px;
  height: 300px;
  border: 10px dashed #f00;
  padding: 20px;
  background-color: #eee;
  background-image: url("https://naytikurs.ru/img/5.png"), url("https://naytikurs.ru/img/6.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right; /* Позиции для наглядности */
  /* Укажите область позиционирования */
  input1: input2, input3;
}

                     .container {
  width: 300px;
  height: 300px;
  border: 10px dashed #f00;
  padding: 20px;
  background-color: #eee;
  background-image: url("https://naytikurs.ru/img/5.png"), url("https://naytikurs.ru/img/6.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right; /* Позиции для наглядности */
  /* Укажите область позиционирования */
  input1: input2, input3;
}

HTML

<div class="container">Содержимое элемента</div>

Свойство `background-origin` определяет область, относительно которой вычисляется позиция фона (`background-position`). Возможные значения: `border-box` (относительно внешнего края рамки), `padding-box` (относительно края области внутреннего отступа), `content-box` (относительно края содержимого). Значения для разных слоев перечисляются через запятую.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинирование свойств в краткой записи

Используя краткую запись `background`, создайте сложный фон. Первый слой: '7.png', по центру, не повторяется, размер `contain`. Второй слой: '8.png', в верхнем правом углу, повторяется только по горизонтали (`repeat-x`). Третий слой: '9.png', в нижнем левом углу, не повторяется.

CSS

.container {
  width: 360px;
  height: 300px;
  border: 1px solid #ccc;
  /* Используйте краткую запись для трех слоев */
  input1:
    /* Слой 1: 7.png, центр, без повтора, contain */
    url("https://naytikurs.ru/img/7.png") input2 / input3 input4,
    /* Слой 2: 8.png, верхний правый угол, repeat-x */
    url("https://naytikurs.ru/img/8.png") input5 input6,
    /* Слой 3: 9.png, нижний левый угол, без повтора */
    url("https://naytikurs.ru/img/9.png") input7 no-repeat;
}

                     .container {
  width: 360px;
  height: 300px;
  border: 1px solid #ccc;
  /* Используйте краткую запись для трех слоев */
  input1:
    /* Слой 1: 7.png, центр, без повтора, contain */
    url("https://naytikurs.ru/img/7.png") input2 / input3 input4,
    /* Слой 2: 8.png, верхний правый угол, repeat-x */
    url("https://naytikurs.ru/img/8.png") input5 input6,
    /* Слой 3: 9.png, нижний левый угол, без повтора */
    url("https://naytikurs.ru/img/9.png") input7 no-repeat;
}

HTML

<div class="container"></div>

В краткой записи `background` можно комбинировать множество свойств для каждого слоя, разделяя слои запятыми. Для указания размера (`background-size`) используйте синтаксис `position / size`. Например: `center / contain`. Порядок значений внутри слоя важен для `position` и `size`, остальные обычно можно указывать в любом порядке после URL.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку