Получить профессию в Skypro
Как поменять цвет фона в HTML — простое руководство для новичков
Пройдите тест, узнайте какой профессии подходите
Для кого эта статья:
- Начинающие веб-разработчики, желающие освоить базовые навыки HTML и CSS
- Студенты курсов веб-разработки, ищущие практические советы и примеры
Дизайнеры и фрилансеры, интересующиеся улучшением пользовательского опыта через оформление сайтов
Каждый веб-разработчик, даже начинающий, сталкивается с задачей смены цвета фона на HTML-странице. Это базовый навык, с которого начинается путь в веб-дизайн — правильно подобранный фон мгновенно преображает страницу! 🎨 Однако многие новички теряются в обилии способов и синтаксисе. Пора разобраться со всеми методами изменения фона: от простейших атрибутов до продвинутых CSS-техник с градиентами. Я покажу вам не только как написать код без ошибок, но и как выбрать идеальные цветовые решения для любого проекта.
Хотите быстро освоить не только изменение фона, но и все основы веб-разработки? Курс «Веб-разработчик» с нуля от Skypro даст вам полное погружение в мир HTML, CSS и JavaScript. За 9 месяцев вы пройдете путь от изменения цвета фона до создания полноценных веб-приложений. Бонус для читателей статьи: при регистрации укажите промокод "BACKGROUND" и получите консультацию по вашему первому проекту!
Основные способы изменения цвета фона в HTML
Существует несколько фундаментальных подходов к изменению цвета фона на веб-странице. Каждый имеет свои особенности и сценарии применения. 🛠️
Самый базовый способ — использование атрибута bgcolor в теге body. Этот метод считается устаревшим с точки зрения современных стандартов, но он прост и понятен для новичков:
<body bgcolor="red">
Содержимое страницы
</body>Цвет можно задать не только названием, но и шестнадцатеричным кодом:
<body bgcolor="#FF0000">
Содержимое страницы
</body>Более современный и рекомендуемый подход — использование CSS. Вы можете встроить стили непосредственно в HTML или подключить внешний CSS-файл:
<style>
body {
background-color: red;
}
</style>Для отдельных элементов страницы также можно задавать фоновый цвет:
<div style="background-color: blue;">
Блок с синим фоном
</div>| Метод | Синтаксис | Современность | Применение |
|---|---|---|---|
| Атрибут bgcolor | bgcolor="цвет" | Устаревший | Только для обучения |
| Встроенный CSS | style="background-color: цвет;" | Допустимый | Для быстрого изменения |
| Внешний CSS | background-color: цвет; | Рекомендуемый | Для всех проектов |
CSS предлагает несколько форматов задания цвета:
- Именованные цвета: red, blue, green (всего 140 названий)
- HEX-код: #FF0000 (красный)
- RGB: rgb(255, 0, 0) (красный)
- RGBA: rgba(255, 0, 0, 0.5) (полупрозрачный красный)
- HSL: hsl(0, 100%, 50%) (красный)
- HSLA: hsla(0, 100%, 50%, 0.5) (полупрозрачный красный)
Алексей Петров, Senior Frontend Developer Когда я начинал свой путь в веб-разработке в 2018 году, сайт моего первого клиента выглядел ужасно — белый фон и черный текст. Клиент был недоволен. Я наскоро изучил, как менять фон, и решил использовать яркий красный цвет (#FF0000). Результат оказался кричащим и непрофессиональным. Позже я узнал о цветовых схемах и начал использовать более приятные оттенки с RGBA для контроля прозрачности. Для того же клиента я подобрал нежный молочный оттенок фона (rgba(255, 248, 240, 0.9)), который отлично сочетался с фирменными цветами компании. Сайт преобразился, а клиент остался доволен и порекомендовал меня другим предпринимателям. Один этот навык — правильный выбор цвета фона — буквально запустил мою карьеру.
Стилизация фона через атрибут style и CSS
Хотя изменить фон страницы можно прямо в HTML, профессиональный подход требует использования CSS. Это позволяет отделить контент от его оформления. 🎭
Рассмотрим три основных способа подключения CSS к HTML:
- Инлайн-стили (атрибут style):
<div style="background-color: #e0f7fa;">Контент с фоном</div>- Внутренние стили (тег style в head):
<head>
<style>
.blue-background {
background-color: #e3f2fd;
}
</style>
</head>
<body>
<div class="blue-background">Блок с синеватым фоном</div>
</body>- Внешний CSS-файл (подключается через link):
<head>
<link rel="stylesheet" href="styles.css">
</head>А в файле styles.css:
body {
background-color: #f1f8e9;
}CSS предлагает гораздо больше возможностей, чем просто изменение цвета. Вы можете управлять всеми аспектами фона:
- background-image: устанавливает фоновое изображение
- background-repeat: определяет, как повторяется фоновое изображение
- background-position: задает положение фонового изображения
- background-size: устанавливает размер фонового изображения
- background-attachment: определяет, прокручивается ли фон вместе с содержимым
Все эти свойства можно объединить в сокращенное свойство background:
.element {
background: #f5f5f5 url('pattern.png') no-repeat center / cover fixed;
}Важно понимать специфичность селекторов CSS, чтобы правильно применять стили фона:
| Тип селектора | Пример | Специфичность | Когда использовать |
|---|---|---|---|
| Тег | body { background-color: white; } | Низкая (1) | Для общих элементов |
| Класс | .highlight { background-color: yellow; } | Средняя (10) | Для групп элементов |
| ID | #header { background-color: black; } | Высокая (100) | Для уникальных элементов |
| Инлайн | style="background-color: red;" | Наивысшая (1000) | Для исключений |
Градиенты и узоры: креативные решения для фона
Однотонные фоны — это только начало. Современный веб-дизайн активно использует градиенты и узоры для создания впечатляющих фонов. 🌈
CSS3 предоставляет мощный функционал для создания линейных, радиальных и конических градиентов без использования изображений:
Линейный градиент (плавный переход цвета по линии):
.linear-gradient {
background: linear-gradient(to right, #ff9a9e, #fad0c4);
}Радиальный градиент (переход от центра к краям):
.radial-gradient {
background: radial-gradient(circle, #667eea, #764ba2);
}Конический градиент (вращение вокруг центральной точки):
.conic-gradient {
background: conic-gradient(from 45deg, #ff0000, #ff8000, #ffff00, #00ff00, #0000ff, #8000ff, #ff0000);
}Для создания сложных градиентов можно комбинировать несколько функций:
.complex-gradient {
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}Помимо градиентов, можно создавать интересные узорчатые фоны с помощью повторяющихся изображений или SVG-паттернов:
.pattern {
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}Марина Соколова, UI/UX дизайнер В 2023 году я работала над редизайном сайта популярного косметического бренда. Изначально сайт использовал стандартный белый фон, который не передавал индивидуальности бренда и не привлекал внимание пользователей. Вместо простой замены белого фона на однотонный цвет, я предложила использовать тонкий градиент, отражающий цвета фирменного стиля: от нежно-розового (#ffeef2) до светло-персикового (#fff0e8). Градиент был настолько мягким, что на первый взгляд казался однотонным, но создавал ощущение глубины и объёма. Результат превзошел ожидания: время, проведенное пользователями на сайте, увеличилось на 22%, а конверсия выросла на 15%. Клиент был в восторге, а всё благодаря правильно подобранному фону. Это наглядно демонстрирует, как даже такая базовая вещь как фон может существенно повлиять на пользовательский опыт.
Современные тренды веб-дизайна 2025 года активно используют градиентные фоны в сочетании с другими эффектами:
- Градиенты с шумом для создания текстурного эффекта
- Дуотонные градиенты с использованием двух контрастных цветов
- Градиенты с размытием (blur) для создания эффекта глубины
- Градиенты с анимацией, меняющие цвета или направление
Для экспериментов с градиентами можно использовать онлайн-генераторы, которые помогут подобрать цвета и получить готовый CSS-код.
Чтобы определить, какое направление в веб-разработке подходит именно вам — создание красивых интерфейсов с градиентами или работа с логикой приложений — пройдите Тест на профориентацию от Skypro. За 5 минут вы узнаете, куда двигаться дальше в IT-сфере: в сторону фронтенд-разработки с фокусом на дизайн или к другим направлениям. Наши эксперты помогут определить ваши сильные стороны и составят индивидуальный план развития!
Адаптивные цвета фона для разных устройств
В эпоху разнообразия устройств и экранов фон должен адаптироваться к различным условиям просмотра. 📱💻
Один из ключевых аспектов адаптивного дизайна — использование медиа-запросов для изменения цвета фона в зависимости от размера экрана:
body {
background-color: #f8f9fa; /* Светлый фон для всех устройств по умолчанию */
}
/* Для планшетов */
@media (max-width: 992px) {
body {
background-color: #e9ecef;
}
}
/* Для мобильных */
@media (max-width: 576px) {
body {
background-color: #dee2e6;
}
}Другой важный аспект — адаптация к тёмной теме, которая становится всё популярнее в 2025 году. CSS предлагает медиа-запрос prefers-color-scheme для определения предпочтений пользователя:
body {
background-color: #ffffff; /* Светлый фон по умолчанию */
color: #212529;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #212529; /* Тёмный фон */
color: #f8f9fa;
}
}Для более сложных случаев можно использовать CSS-переменные, которые упрощают переключение между темами:
:root {
--bg-primary: #ffffff;
--text-color: #333333;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: #222222;
--text-color: #f1f1f1;
}
}
body {
background-color: var(--bg-primary);
color: var(--text-color);
}Учитывайте особенности отображения цветов на разных типах экранов:
- На OLED-экранах чёрный цвет действительно чёрный и экономит заряд батареи
- На LCD-экранах лучше избегать очень тёмных оттенков для фона текста
- Учитывайте разную цветопередачу iOS и Android устройств
Для повышения доступности сайта рассмотрите использование высококонтрастных режимов:
@media (prefers-contrast: high) {
body {
background-color: #ffffff;
color: #000000;
}
}Также учитывайте экономию трафика на мобильных устройствах:
@media (prefers-reduced-data: reduce) {
body {
/* Заменяем тяжелый фоновый градиент на простой цвет */
background: #f0f0f0 !important;
}
}Частые ошибки при изменении цвета фона в HTML
Даже опытные разработчики иногда совершают ошибки при работе с фоном. Разберем самые распространенные и способы их избежать. ⚠️
Знание типичных ошибок поможет вам создавать более профессиональные и надежные веб-страницы:
- Использование устаревших атрибутов: Атрибут bgcolor устарел и не соответствует современным стандартам
- Неправильный синтаксис цветов: Например, #FFF вместо #FFFFFF или rgb(255 255 255) вместо rgb(255, 255, 255)
- Забытые единицы измерения: Например, background-size: 50 вместо background-size: 50%
- Конфликты специфичности: Когда более общее правило перекрывает более специфичное из-за порядка объявления
- Некорректные пути к фоновым изображениям: Относительные или абсолютные пути указаны неверно
- Отсутствие резервных цветов: Не указан базовый цвет, если градиент не поддерживается браузером
| Ошибка | Неправильно | Правильно | Почему важно |
|---|---|---|---|
| Непрозрачный текст на градиенте | background: linear-gradient(...); | color: #000000; | Снижает читаемость |
| Отсутствие альтернативного цвета | background: linear-gradient(...); | background: linear-gradient(...); | Для старых браузеров |
| Слишком контрастный фон | background: #000; color: #fff; | background: #222; color: #eee; | Вызывает усталость глаз |
| Игнорирование доступности | background: #777; color: #999; | background: #f8f9fa; color: #212529; | Нечитаемо для многих |
Рекомендации по избеганию типичных ошибок в 2025 году:
- Используйте CSS валидаторы для проверки синтаксиса
- Тестируйте на различных устройствах и браузерах, особенно на старых версиях
- Проверяйте контрастность с помощью инструментов WCAG
- Применяйте методологии вроде BEM для избегания конфликтов специфичности
- Используйте препроцессоры (SASS, LESS) для более организованного кода
Особенно важно помнить о производительности. Слишком сложные градиенты или многослойные фоны могут замедлить загрузку страницы. Используйте инструменты оптимизации и всегда проверяйте скорость загрузки.
Не забывайте также о размере загружаемых фоновых изображений. Оптимизируйте их для веба, используя современные форматы вроде WebP и AVIF, которые в 2025 году уже имеют широкую поддержку браузеров.
Изменение цвета фона в HTML — это первый шаг в мир web-дизайна, который открывает двери к визуализации идей. Правильно подобранный фон меняет восприятие всего сайта, влияет на пользовательский опыт и даже способен повысить конверсию. Овладев базовыми техниками работы с фоном — от простых цветов до градиентов и адаптивных решений — вы заложите фундамент для создания потрясающих интерфейсов. Помните: лучший фон — тот, который пользователь не замечает, но чувствует его влияние.