CSS Academy · Урок

Цвет и изображение фона

Применяйте цвета и изображения фона с помощью свойств background-color и background-image.

Урок 2 из 413 шагов

«Цвет и изображение фона» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

background-color

Свойство background-color задаёт сплошной цвет позади элемента. Оно принимает любое значение цвета CSS и видно через прозрачные области фоновых изображений.

<div class="hero">Hero section</div>

background-image

Свойство background-image задаёт одно или несколько изображений в качестве фона элемента. Изображения располагаются поверх background-color.

<div class="banner">Banner (image missing &rarr; fallback color shows)</div>

background-size

Свойство background-size управляет размерами изображения. Основные значения:

cover — заполняет область, при необходимости обрезая изображение
contain — полностью вписывает изображение, но может оставить пустые области
100% 100% — растягивает изображение точно до размеров области

<div class="hero"></div>

background-position

Свойство background-position задаёт положение изображения. Используйте ключевые слова, проценты или значения длины.

<div class="hero"></div>

background-repeat

По умолчанию изображения повторяются плиткой. Управляйте повторением с помощью background-repeat:

<div class="hero"></div>
  <div class="pattern"></div>

background-attachment

Свойство background-attachment определяет, прокручивается ли изображение вместе со страницей. Значение fixed создаёт эффект, похожий на параллакс, а scroll используется по умолчанию.

<div class="spacer">Scroll down &darr;</div>
  <div class="parallax">Fixed background</div>
  <div class="spacer">Scroll up &uarr;</div>

Несколько фоновых изображений

CSS поддерживает несколько разделённых запятыми фоновых слоёв. Первый указанный слой отображается поверх остальных.

<div class="card">Overlay + photo layers</div>

Сокращённая запись background

Сокращённая запись background объединяет все свойства фона в одном объявлении. Для размера важен порядок: указывайте его после позиции, отделяя косой чертой /.

<div class="hero"></div>

Область и начало фона

Свойство background-clip управляет тем, где отрисовывается фон относительно блочной модели. Свойство background-origin задаёт исходную точку для позиционирования.

<div class="card">Clip &amp; Origin</div>

Обрезка фона по тексту

Используйте background-clip: text с прозрачным цветом текста, чтобы обрезать фоновое изображение или градиент по форме текста.

<h1>Gradient Text</h1>

object-fit для <img> и background-image

Для тегов <img> используйте object-fit: cover и object-position вместо background-image. Это сохраняет изображения в DOM, что важно для доступности и поисковой оптимизации.

<img class="hero-img" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='800'><rect width='400' height='800' fill='%23ff6347'/><circle cx='200' cy='200' r='150' fill='%231e90ff'/></svg>" alt="hero" />

Проверка

Какое значение background-size заполняет область и обрезает изображение, не оставляя пустых мест?

Ответь в интерактивном уроке

Итоги

Используйте background-color как резервный фон под изображениями. background-size: cover — стандартный выбор для фоновых изображений главного экрана на всю ширину. Несколько фоновых слоёв дают широкие возможности для их компоновки. Сокращённая запись кратко объединяет все свойства фона.

Можно начать бесплатно

Изучай CSS с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 40
Уроки: 159

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Цвет и изображение фона» бесплатный?

Да — полный текст урока «Цвет и изображение фона» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Цвет и изображение фона»?

Применяйте цвета и изображения фона с помощью свойств background-color и background-image. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Цвет и изображение фона»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy