Сокращенная запись свойств фона

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

Опубликовано 17.03.2025
Просмотры 53
Автор
Рек. время прохождения 3 минуты
Упражнений 10
Комментарии 0
Тренажер CSS

В этой серии упражнений вы попрактикуетесь в использовании сокращенного свойства `background`. Это свойство позволяет установить несколько параметров фона элемента одновременно, делая ваш CSS код более лаконичным и читаемым. Задания построены от простого к сложному: начиная от установки одного значения (например, цвета) и заканчивая комбинацией нескольких параметров, таких как цвет, изображение, повторение, позиционирование и размер фона. Вам нужно будет заполнить пропущенные части CSS кода, чтобы достичь нужного визуального результата, который будет отображаться в окне предпросмотра.

Список тем

Установка цвета фона

id: 37350_css-bg-shorthand-1

Самое простое применение сокращенного свойства `background` — установка цвета фона. Заполните пропуск в CSS коде так, чтобы у элемента `div` установился сплошной синий цвет фона с помощью сокращенной записи.

CSS
div {
  width: 200px;
  height: 200px;
  input1: blue;
}
HTML
<div></div>
Чтобы установить только цвет фона с помощью сокращенной записи, используйте свойство `background` и укажите значение цвета. В данном случае, нужно указать `background`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фон: цвет и изображение

id: 37350_css-bg-shorthand-2

Используйте сокращенную запись `background`, чтобы установить для элемента `div` одновременно и фоновый цвет (голубой - `lightblue`), и фоновое изображение. Изображение должно быть указано после цвета.

CSS
div {
  width: 300px;
  height: 250px;
  input1: lightblue url('https://naytikurs.ru/img/1.png');
}
HTML
<div></div>
В сокращенной записи `background` значения можно перечислять через пробел. Сначала укажите цвет `lightblue`, а затем URL изображения. Используйте свойство `background`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фон: изображение без повторения

id: 37350_css-bg-shorthand-3

Задайте фоновое изображение для элемента `div` и укажите, чтобы оно не повторялось по осям X и Y. Используйте сокращенную запись `background`. Цвет фона задавать не нужно.

CSS
div {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc; /* Добавим рамку для наглядности */
  background: url('https://naytikurs.ru/img/2.png') input1;
}
HTML
<div></div>
В сокращенной записи `background` используйте URL изображения и ключевое слово `no-repeat` для отмены повторения. Порядок: URL, затем `no-repeat`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фон: изображение по центру

id: 37350_css-bg-shorthand-4

Установите фоновое изображение для `div` так, чтобы оно не повторялось и располагалось строго по центру элемента. Используйте сокращенную запись `background`.

CSS
div {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background: url('https://naytikurs.ru/img/4.png') no-repeat input1;
}
HTML
<div></div>
Для позиционирования фона по центру используйте значение `center`. В сокращенной записи `background` укажите URL, затем `no-repeat`, а затем `center`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фон: изображение справа по центру

id: 37350_css-bg-shorthand-5

Задайте фоновое изображение для `div`. Оно не должно повторяться и должно быть выровнено по правому краю и по центру вертикально. Используйте сокращенную запись `background`.

CSS
div {
  width: 300px;
  height: 250px;
  border: 1px solid #ccc;
  background: url('https://naytikurs.ru/img/5.png') no-repeat input1 input2;
}
HTML
<div></div>
Для позиционирования фона можно использовать два значения: первое для горизонтального положения, второе для вертикального. Используйте `right` и `center`. Порядок в сокращенной записи: URL, `no-repeat`, `right center`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фон: Полная запись (цвет, изображение, повтор, позиция)

id: 37350_css-bg-shorthand-6

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

CSS
div {
  width: 350px;
  height: 300px;
  border: 1px solid #ccc;
  input1: lightgray url('https://naytikurs.ru/img/6.png') input2 input3 top;
}
HTML
<div></div>
В сокращенной записи `background` можно комбинировать множество значений. Стандартный порядок: `background-color`, `background-image`, `background-repeat`, `background-position`. Укажите цвет `lightgray`, URL изображения, `no-repeat` и позицию `right top`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фон: Фиксированное изображение

id: 37350_css-bg-shorthand-7

Сделайте так, чтобы фоновое изображение элемента `div` было зафиксировано относительно окна просмотра (не прокручивалось вместе с элементом). Используйте сокращенную запись `background`, также задайте цвет фона `beige` и укажите, что изображение не должно повторяться.

CSS
div {
  width: 300px;
  height: 500px; /* Увеличим высоту для демонстрации прокрутки */
  border: 1px solid #ccc;
  overflow: auto; /* Добавим прокрутку, если контент не помещается */
  background: beige url('https://naytikurs.ru/img/7.png') no-repeat input1;
}
HTML
<div>Тут много текста, чтобы появилась прокрутка внутри блока...<br>Прокрутите этот блок, чтобы увидеть эффект фиксированного фона.<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>Конец текста.</div>
Для фиксации фона используется значение `fixed` (соответствует свойству `background-attachment`). Добавьте `fixed` в список значений свойства `background` после URL и `no-repeat`. Цвет фона `beige` должен идти первым.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фон: Размер `cover`

id: 37350_css-bg-shorthand-8

Установите фоновое изображение для `div` так, чтобы оно масштабировалось, полностью покрывая всю площадь элемента, даже если часть изображения обрежется. Используйте сокращенную запись `background`. Также укажите, что изображение должно быть по центру и не повторяться.

CSS
div {
  width: 350px;
  height: 250px;
  border: 1px solid #ccc;
  background: url('https://naytikurs.ru/img/8.png') center input1 input2;
}
HTML
<div></div>
Размер фона задается после позиции через слеш (`/`). Используйте значение `cover` для `background-size`. Полная запись будет выглядеть примерно так: `url(...) center / cover`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фон: Размер `contain`

id: 37350_css-bg-shorthand-9

Задайте фоновое изображение для `div` так, чтобы оно масштабировалось, полностью помещаясь внутри элемента без обрезки. Если пропорции изображения и элемента не совпадают, останутся пустые области. Используйте сокращенную запись `background`. Изображение должно быть по центру и не повторяться. Установите также светло-зеленый (`lightgreen`) цвет фона.

CSS
div {
  width: 350px;
  height: 250px;
  border: 1px solid #ccc;
  background: lightgreen url('https://naytikurs.ru/img/9.png') center / input2 no-repeat;
}
HTML
<div></div>
Используйте значение `contain` для `background-size`, указав его после позиции и слеша (`/`). Полная запись: `lightgreen url(...) center / input2 no-repeat`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Фон: Комплексная задача

id: 37350_css-bg-shorthand-10

Примените все изученные свойства фона в одной сокращенной записи `background`. Установите: цвет фона `khaki`, изображение, которое не повторяется, выровнено по центру горизонтально и внизу вертикально (`center bottom`), прокручивается вместе с элементом (`scroll`) и масштабируется так, чтобы полностью поместиться в элемент (`contain`).

CSS
div {
  width: 350px;
  height: 300px;
  border: 1px solid #ccc;
  input1: khaki url('https://naytikurs.ru/img/1.png') center bottom / input5 input2 input3;
}
HTML
<div></div>
Соберите все значения в правильном порядке для свойства `background`: цвет, URL, позиция (`center bottom`), повторение (`no-repeat`), прокрутка (`scroll`), слеш (`/`) и размер (`contain`). Обратите внимание, что порядок некоторых значений (например, repeat, attachment, position) может быть произвольным до слеша, но стандартный порядок предпочтительнее.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру