Фон текстового блока в CSS: цвет, градиент, изображение и читаемость

Фон помогает объединить содержимое, отделить важную заметку или создать визуальную иерархию. Но оформление не должно мешать чтению: тексту нужны достаточный контраст, внутренние отступы и предсказуемое поведение при изменении длины.

Начните с простого блока:

<aside class="note" aria-labelledby="note-title">  <h2 id="note-title" class="note__title">Обратите внимание</h2>  <p class="note__text">Проверяйте контраст текста на итоговом фоне.</p></aside>​

.note {  padding: 1.25rem;  color: #1d2939;  background-color: #f2f4f7;  border: 1px solid #d0d5dd;  border-radius: 0.75rem;}​.note__title {  margin-block: 0 0.5rem;}​.note__text {  margin-block: 0;}​

Фон принадлежит контейнеру, а отступ создаётся через padding. Не добавляйте пробелы или пустые <br> в HTML ради визуального расстояния.

Цвет фона

Для сплошного фона используйте background-color:

.note--success {  color: #054f31;  background-color: #ecfdf3;  border-color: #abefc6;}​

Название модификатора описывает назначение, а не оттенок. Если палитра изменится, класс .note--success останется уместным.

Цвет текста может наследоваться дочерними элементами. Ссылки стоит проверять отдельно: их стандартный оттенок не всегда контрастирует с цветным фоном.

Градиент

Градиент считается фоновым изображением:

.hero-copy {  padding: clamp(1.5rem, 4vw, 3rem);  color: #f8f7ff;  background:    linear-gradient(135deg, rgb(23 16 52 / 96%), rgb(76 29 149 / 88%));}​

Проверяйте контраст не в одной точке, а на всей площади под текстом. Если один край слишком светлый, измените цвета, направление или расположение текста.

Несколько фоновых слоёв перечисляются через запятую. Первый рисуется ближе к пользователю:

.promo {  background:    linear-gradient(rgb(10 12 18 / 75%), rgb(10 12 18 / 75%)),    url('/assets/img/promo.webp') center / cover no-repeat;}​

Полупрозрачный слой улучшает читаемость, но не гарантирует её для любого изображения.

Фоновое изображение или <img>

Используйте background-image, если картинка декоративная и может быть обрезана без потери смысла. Содержательное изображение должно оставаться в HTML с alt:

<figure>  <img src="chart.webp" alt="График роста времени загрузки от 1,2 до 2,4 секунды">  <figcaption>Результаты измерения до оптимизации.</figcaption></figure>​

Для декоративного фона:

.quote-card {  background-image: url('/assets/img/decorative/grid.svg');  background-position: right top;  background-repeat: no-repeat;  background-size: 14rem auto;}​

Фоновое изображение не имеет alt и может не печататься, поэтому не помещайте в него обязательный текст.

Размер и положение

Часто используются следующие значения:

• cover заполняет контейнер и может обрезать края;
• contain показывает изображение целиком, но оставляет свободное место;
• background-position выбирает точку выравнивания;
• background-repeat: no-repeat отключает повтор;
• background-attachment: fixed создаёт эффект фиксации, но может плохо работать и тормозить на мобильных устройствах.

.banner {  min-block-size: 18rem;  background-color: #101828;  background-image: url('/assets/img/banner.webp');  background-position: 65% center;  background-size: cover;  background-repeat: no-repeat;}​

Используйте min-block-size, а не жёсткую height, если внутри есть текст. При увеличении шрифта блок сможет вырасти.

Декоративный слой через псевдоэлемент

Когда орнамент должен иметь собственную прозрачность, удобен псевдоэлемент:

.feature {  position: relative;  isolation: isolate;  padding: 2rem;  background-color: #18152f;}​.feature::before {  position: absolute;  inset: 0;  z-index: -1;  content: '';  background: url('/assets/img/decorative/noise.webp') center / cover;  opacity: 0.16;  pointer-events: none;}​

opacity применяется только к декоративному слою, а не ко всему контейнеру с текстом. isolation: isolate создаёт локальный контекст наложения и не позволяет отрицательному z-index уйти за неожиданных предков.

Устойчивость к содержимому

Проверьте блок с:

• заголовком в две или три строки;
• несколькими абзацами вместо одного;
• длинной ссылкой без пробелов;
• масштабом браузера 200%;
• шириной 320 px;
• тёмной и светлой системной темой, если они поддерживаются.

.note {  overflow-wrap: anywhere;}​

Не используйте overflow: hidden для сокрытия последствий фиксированной высоты: так можно обрезать текст или фокус.

Что запомнить

Начинайте со сплошного контрастного фона, достаточных padding и min-block-size. Декоративные изображения оставляйте в CSS, содержательные — в HTML. Проверяйте весь фон под текстом и тестируйте блок с длинным содержимым и увеличенным масштабом.

report Сообщить об ошибке в статье