LabEx
ВходРегистрация

Применение стилей фона в CSS

CSSBeginner
Практиковаться сейчас

Введение

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

С помощью практических примеров вы изучите различные методы указания цветов фона, используя именованные цвета, шестнадцатеричные коды и функции RGB, а также научитесь использовать фоновые изображения с точными техниками изменения размера и позиционирования. К концу этой лабораторной работы вы приобретете практические навыки использования свойств фона CSS для создания более динамичных и привлекательных дизайнов веб-страниц.

Установка цвета фона для HTML-элементов

На этом шаге вы научитесь устанавливать цвета фона для HTML-элементов с помощью CSS. Цвета фона являются фундаментальным способом улучшения визуального дизайна веб-страниц путем добавления цвета различным элементам.

Сначала создадим HTML-файл для демонстрации стилизации цвета фона. Откройте WebIDE и создайте новый файл с именем styles.html в каталоге ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Пример цвета фона</title>
    <style>
      /* Здесь мы добавим наш CSS */
    </style>
  </head>
  <body>
    <div class="box1">Первый блок</div>
    <div class="box2">Второй блок</div>
    <p class="paragraph">Это параграф с цветом фона.</p>
  </body>
</html>

Теперь добавим CSS для установки цветов фона различным элементам. Обновите раздел <style> в HTML-файле:

.box1 {
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 10px;
}

.box2 {
  background-color: #ff5733;
  color: white;
  padding: 20px;
  margin: 10px;
}

.paragraph {
  background-color: rgb(200, 230, 255);
  padding: 15px;
}

В этом примере мы продемонстрировали три способа указания цветов фона:

  1. Именованный цвет (blue)
  2. Шестнадцатеричный цветовой код (#FF5733)
  3. Функция цвета RGB (rgb(200, 230, 255))

Сохраните файл и откройте его в веб-браузере, чтобы увидеть примененные к элементам различные цвета фона.

Добавление фонового изображения с указанием размера

На этом шаге вы научитесь добавлять фоновые изображения к HTML-элементам и управлять их размерами с помощью CSS. Мы продолжим развивать предыдущий пример, изменив файл styles.html в каталоге ~/project.

Пример изображения находится в каталоге ~/project.

Теперь обновите файл styles.html следующим содержимым:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Изменение размера фонового изображения</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
      }

      .cover-background {
        background-image: url("background-sample.jpg");
        background-size: cover;
      }

      .contain-background {
        background-image: url("background-sample.jpg");
        background-size: contain;
      }

      .custom-size-background {
        background-image: url("background-sample.jpg");
        background-size: 200px 150px;
      }
    </style>
  </head>
  <body>
    <div class="image-container cover-background">
      Cover: Заполняет весь контейнер
    </div>
    <div class="image-container contain-background">
      Contain: Помещает все изображение
    </div>
    <div class="image-container custom-size-background">
      Пользовательский размер: 200x150 пикселей
    </div>
  </body>
</html>

Этот пример демонстрирует три различных способа изменения размера фоновых изображений:

  1. background-size: cover; - Масштабирует изображение, чтобы оно покрывало весь контейнер
  2. background-size: contain; - Масштабирует изображение, чтобы оно полностью помещалось внутри контейнера
  3. background-size: 200px 150px; - Устанавливает конкретный размер в пикселях для фонового изображения

При открытии этого HTML-файла в браузере вы увидите три различные техники изменения размера фонового изображения.

Позиционирование фонового изображения

На этом шаге вы научитесь управлять позиционированием фоновых изображений с помощью CSS. Мы продолжим модифицировать файл styles.html в каталоге ~/project, чтобы продемонстрировать различные методы позиционирования фона.

Обновите файл styles.html следующим содержимым:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Позиционирование фонового изображения</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .top-left {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: top left;
      }

      .center {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: center;
      }

      .bottom-right {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: bottom right;
      }

      .custom-position {
        background-image: url("background-sample.jpg");
        background-size: cover;
        background-position: 20% 80%;
      }
    </style>
  </head>
  <body>
    <div class="image-container top-left">Позиция вверху слева</div>
    <div class="image-container center">Центральная позиция</div>
    <div class="image-container bottom-right">Позиция внизу справа</div>
    <div class="image-container custom-position">
      Пользовательская позиция (20% 80%)
    </div>
  </body>
</html>

Этот пример демонстрирует четыре различных способа позиционирования фоновых изображений:

  1. background-position: top left; - Позиционирует изображение в верхнем левом углу
  2. background-position: center; - Центрирует изображение внутри контейнера
  3. background-position: bottom right; - Позиционирует изображение в нижнем правом углу
  4. background-position: 20% 80%; - Использует процентные значения для пользовательского позиционирования

При открытии этого HTML-файла в браузере вы увидите, как различные значения позиционирования влияют на размещение фонового изображения.

Управление повторением фонового изображения

На этом шаге вы научитесь управлять повторением фоновых изображений с помощью CSS-свойства background-repeat. Мы продолжим модифицировать файл styles.html в каталоге ~/project, чтобы продемонстрировать различные методы повторения.

Обновите файл styles.html следующим содержимым:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Повторение фонового изображения</title>
    <style>
      .image-container {
        width: 500px;
        height: 300px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
      }

      .repeat {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat;
      }

      .repeat-x {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-x;
      }

      .repeat-y {
        background-image: url("background-sample.jpg");
        background-size: 100px 100px;
        background-repeat: repeat-y;
      }

      .no-repeat {
        background-image: url("background-sample.jpg");
        background-size: 200px 200px;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container repeat">Repeat (По умолчанию)</div>
    <div class="image-container repeat-x">Repeat X (По горизонтали)</div>
    <div class="image-container repeat-y">Repeat Y (По вертикали)</div>
    <div class="image-container no-repeat">No Repeat (Без повторения)</div>
  </body>
</html>

Этот пример демонстрирует четыре различных метода повторения фоновых изображений:

  1. background-repeat: repeat; - Повторяет изображение как по горизонтали, так и по вертикали (по умолчанию)
  2. background-repeat: repeat-x; - Повторяет изображение только по горизонтали
  3. background-repeat: repeat-y; - Повторяет изображение только по вертикали
  4. background-repeat: no-repeat; - Предотвращает повторение изображения

При открытии этого HTML-файла в браузере вы увидите, как различные значения повторения влияют на отображение фонового изображения.

Комбинирование нескольких фоновых свойств

На этом шаге вы научитесь комбинировать несколько фоновых свойств для создания более сложных и интересных фоновых дизайнов. Мы модифицируем файл styles.html в каталоге ~/project, чтобы продемонстрировать продвинутые методы стилизации фона.

Обновите файл styles.html следующим содержимым:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Несколько фоновых свойств</title>
    <style>
      .image-container {
        width: 600px;
        height: 400px;
        border: 2px solid black;
        margin: 20px;
        color: white;
        font-weight: bold;
        padding: 20px;
      }

      .multiple-backgrounds {
        background-image:
          linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
          url("background-sample.jpg");
        background-size: cover, cover;
        background-position: center, center;
        background-repeat: no-repeat, no-repeat;
      }

      .layered-backgrounds {
        background-image:
          url("small-pattern.jpg"), linear-gradient(to right, #ff6b6b, #4ecdc4);
        background-size:
          100px 100px,
          cover;
        background-position:
          top left,
          center;
        background-repeat: repeat, no-repeat;
      }
    </style>
  </head>
  <body>
    <div class="image-container multiple-backgrounds">
      Наложение фона с изображением
    </div>
    <div class="image-container layered-backgrounds">
      Многослойный фон с узором и градиентом
    </div>
  </body>
</html>

Файл small-pattern.jpg находится в каталоге ~/project.

Этот пример демонстрирует две продвинутые техники работы с фоном:

  1. Несколько фонов с наложением:

    • Использует линейный градиент для создания полупрозрачного наложения.
    • Комбинирует градиент с фоновым изображением.
    • Применяет одинаковые размеры, позиционирование и повторение.

  2. Многослойные фоны:

    • Комбинирует повторяющийся узор с линейным градиентом.
    • Использует разные размеры и позиционирование для каждого фонового слоя.

При открытии этого HTML-файла в браузере вы увидите, как несколько фоновых свойств могут создавать сложные и визуально интересные дизайны.

Резюме

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

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

Связанные CSS Курсы
CSS для начинающих

CSS для начинающих

cssweb-development
Создание веб-приложения для игры в крестики-нолики

Создание веб-приложения для игры в крестики-нолики

javascriptweb-development
Создание веб-игры «Бей-кабанчика»

Создание веб-игры «Бей-кабанчика»

javascriptweb-development