Свойство background: фон элемента
Как задать цвет или градиент фона и не потерять параметры сокращённого свойства.
Как это работает
background объединяет несколько настроек фона: цвет, изображение, повторение, положение и размер. Для простого цвета удобнее background-color: так правило не сбросит другие фоновые параметры, заданные ранее.
Фон не является содержимым документа и не имеет alt. Поэтому значимые изображения лучше размещать через img. У фоновой картинки задавайте резервный цвет на случай, если загрузка не удалась. Текст должен читаться во всех участках фона.
Пример в интерфейсе
.banner { background: linear-gradient(110deg, #eaf4ee, #e6eef9); padding: 26px; color: #203d32; border-radius: 12px; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| background-color | Однотонная заливка. |
| linear-gradient(…) | Градиент как фоновое изображение. |
| background-size: cover | Заполнение области с возможной обрезкой. |
| background-repeat: no-repeat | Отключение повторения картинки. |
На что обратить внимание
Новое объявление background может сбросить ранее заданные size или repeat. При точечном изменении используйте отдельное свойство.
Проверьте на практике
Замените градиент однотонным фоном и сравните читаемость. Попробуйте более длинный текст, который занимает две строки.
Связанные темы: color, border-radius.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.