Как изменить цвет фона с помощью CSS

Дядя Влад

Один из самых захватывающих моментов в карьере любого начинающего фронтенд-разработчика – это научиться изменять цвет фона веб-страницы.

Работать с HTML – это здорово, но с помощью всего лишь нескольких строк CSS вы можете оживить свои страницы и свое путешествие по программированию.

Это руководство расскажет обо всем, что вам нужно знать о том, как изменить цвет фона с помощью CSS.

Получите настройку

Сделаем небольшую предварительную работу.

Примечание . Я рекомендую использовать Visual Studio Code с расширением Live Server для просмотра изменений в реальном времени по мере обновления HTML и CSS.

  1. Создайте папку для файлов вашего проекта.
  2. Создайте файл index.html для размещения вашего HTML. Вы можете использовать шаблонный код или просто настроить теги <html> , <head> и <body> .
  3. Создайте файл styles.css для своего CSS.
  4. Свяжите свой файл CSS с HTML, поместив <link rel = "stylesheet" href = "styles.css"> внутри тегов <head> .

Теперь вы готовы приступить к редактированию CSS.

Связанный: Как создать шаблонный веб-сайт

Как изменить цвет фона с помощью CSS

Самый простой способ изменить цвет фона – настроить таргетинг на тег body . Затем отредактируйте свойство background-color . Вы можете найти цветовые коды, выполнив поиск и используя расширение браузера Google Color Picker

 body {
 background-color: rgb(191, 214, 255);
 }

Этот код меняет фон на приятный светло-голубой.

Свойство background-color принимает цвета в шести различных формах:

  • название : lightskyblue; (для близкого приближения)
  • шестнадцатеричный код : # bfd6ff;
  • RGB : RGB (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); где а – альфа (непрозрачность)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); где а – альфа (непрозрачность)

Используйте сокращенное свойство background вместо background-color, чтобы сократить лишний код. С помощью этого метода вы можете изменить цвет фона любого элемента HTML.

Создайте элемент <div> и присвойте ему класс – в данном случае это панель . Установите его свойства высоты и ширины в CSS. Выберите элемент в CSS и закрасьте его.

 body {
 background-color: rgb(191, 214, 255);
 }
 .container{
 display: flex;
 justify-content: center;
 align-items: center;
 height: 90vh;
 }
 .panel {
 background: rgb(255, 148, 148);
 height: 10rem;
 width: 30%;
 }
 .muo-text {
 font-size: 3em;
 font-weight: bolder;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 position: absolute;
 }

Здесь вы можете видеть, что свойство фона тела стилизовано независимо от свойства фона .panel .

Свойство background также принимает градиенты:

 body {
 background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
 }

css градиентный фон с панелью Как изменить фоновое изображение в CSS

Что, если вы хотите, чтобы фон был изображением, а не сплошным цветом или градиентом? Сокращенное свойство background – знакомый друг.

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

 body {
 background: url(leaves-and-trees.jpg)
 }

Ого! Похоже, изображение слишком увеличено. Вы можете исправить это с помощью свойства background-size .

 body {
 background: url(leaves-and-trees.jpg);
 background-size: cover;
 }

Чтобы использовать сокращенное свойство background в сочетании с покрытием свойства background-size , необходимо также указать свойства background-position и разделить значения обратной косой чертой. (даже если это позиционные значения по умолчанию, такие как верхний левый угол .)

 body {
 background: url(leaves-and-trees.jpg) top left / cover;
 }

Вот так! Фоновое изображение правильного размера в одной строке CSS.

Подробнее: как установить фоновое изображение в CSS

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

Улучшите свою игру CSS с помощью CSS box-shadow

Для такого разработчика, как вы, свойства background-color и background-image – старые новости. К счастью, всегда есть чему поучиться.

Попробуйте усилить свои коробки с помощью CSS box-shadow. Ваши HTML-элементы никогда не выглядели лучше!