Как задать цвет фона в css

background-color

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

Синтаксис

background-color: | transparent | inherit

Значения

transparent Устанавливает прозрачный фон. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Lorem ipsum dolor sit amet
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  

В данном примере для элементов веб-страницы применяется три различных способа задания фонового цвета. Результат примера показан на рис. 1.

Рис. 1. Применение background-color

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundColor

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Свойства в CSS: цвет и фон

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

Если же вы хотите изменить цвет отдельного элемента, задайте свой стиль. Допустим, вы хотите выделить заголовки красным:

Теперь на нашей странице текст выделен зеленым цветом, а заголовки ㅡ красным:

Подчеркнем, что значениями свойства color могут быть как именные цвета (red, green и т.д.), шестнадцатеричные коды цветов (#00FF00, #0000FF и пр.), а также модели RGB (rgb 255, 0, 0).

Что касается фона, то при помощи CSS его можно задавать не только странице, но любым другим элементам, например, заголовкам и абзацам. За фон отвечает свойство background:

• background-color ㅡ цвет фона. Свойство не наследуется по умолчанию, однако это можно исправить, указав в значение inherit. Например, нам нужно сделать синий фон и белый заголовок на HTML-странице (элемент body):

background-color:#0000FF

• background-image ㅡ фоновый рисунок. Значение данного свойства ㅡ URL изображения. После него задается путь к нужному файлу (указывается в круглых скобках):

background-image: url(tree.jpg);

Например, в нашем случае фоновым изображением будет tree.jpg, лежащий в корневом каталоге. Свет фона ㅡ синий, а цвет текста ㅡ белый:

• background-repeat ㅡ повторение фонового изображения. Возможны следующие варианты:

1. repeat ㅡ повтор по горизонтали и вертикали.
2. repeat-x ㅡ повторять только по горизонтали.
3. repeat-y ㅡ повторять только по вертикали.
4. no-repeat ㅡ не повторять изображение.

background-repeat:repeat-x;

• background-attachment ㅡ прокрутка фонового изображения. Речь идет о том, должен ли фоновый рисунок прокручиваться на ряду с текстом или же он должен быть неподвижен. Значения для background-attachment:

1. scroll ㅡ фон прокручивается вместе с текстом (идет по умолчанию).
2. fixed ㅡ фоновое изображение неподвижно в момент прокрутки.

background-attachment:fixed;

• background-position ㅡ расположение изображения относительно окна браузера. Значение задается в процентах, единицах измерения, а также при помощи ключевых слов.

background-position:10% 30%;

background-position:50px 50px;

background-position:center top;

Также рекомендуем почитать:

Категории

• Блог
• Наши новости, акции, нововведения
• Руководства, статьи, инструкции
• Хостинг, домены, мировые новости, обзоры ПО
• Рейтинги, обзоры, отзывы
• Наши новости, акции, нововведения
• Руководства, статьи, инструкции
• Хостинг, домены, мировые новости, обзоры ПО
• Рейтинги, обзоры, отзывы
• RSS

Популярное в категории

• Новая услуга: VPS с выделенным накопителем
• Новая функция в cPanel: установка бесплатного SSL-сертификата от Let’s encrypt
• Авторизация через соцсети в Bitrix
• Создание простого и выпадающего меню на WordPress
• Cron в cPanel: запуск скрипта по расписанию
• Основы JavaScript. Урок 1. Введение в JavaScript. Что такое JavaScript.
• Что делать с ошибкой Strict Standards: Non-static method JLoader?
• Что лучше хостинг или vps?
• Где купить домен и хостинг?
• Инструкция по установке ISPmanager (последняя версия)
• SSL: понятие, суть, предназначение
• Добро пожаловать в наш блог!

background-color

CSS-свойство background-color CSS устанавливает цвет фона элемента.

Интерактивный пример

Синтаксис

/* Словесные значения */ background-color: red; /* Шестнадцатеричное значение */ background-color: #bbff00; /* Шестнадцатеричное значение с alpha-каналом */ background-color: #11ffee00; /* 00 - полностью прозрачный */ background-color: #11ffeeff; /* ff - непрозрачный */ /* RGB-значение */ background-color: rgb(255, 255, 128); /* RGBA-значение или RGB с alpha-каналом */ background-color: rgba(117, 190, 218, 0); /* 0.0 - полностью прозрачный */ background-color: rgba(117, 190, 218, 0.5); /* 0.5 - полупрозрачный */ background-color: rgba(117, 190, 218, 1); /* 1.0 - непрозрачный */ /* HSLA-значение */ background-color: hsla(50, 33%, 25%, 0.75); /* Специальные словесные значения */ background-color: currentColor; background-color: transparent; /* Общие значения */ background-color: inherit; background-color: initial; background-color: unset; 

Свойство background-color определяется единственным значением .

Значения

Формальный синтаксис

background-color =

Примеры

HTML

div class="exampleone">Lorem ipsum dolor sit amet, consectetuerdiv> div class="exampletwo">Lorem ipsum dolor sit amet, consectetuerdiv> div class="examplethree">Lorem ipsum dolor sit amet, consectetuerdiv> 

CSS

.exampleone  background-color: teal; color: white; > .exampletwo  background-color: rgb(153, 102, 153); color: rgb(255, 255, 204); > .examplethree  background-color: #777799; color: #ffffff; > 

Результат

Проблемы доступности

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Спецификации

Specification
CSS Backgrounds and Borders Module Level 3 # background-color

Начальное значение	transparent
Применяется к	все элементы. Это также применяется к ::first-letter и ::first-line .
Наследуется	нет
Обработка значения	вычисленный цвет
Animation type	цвет

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

• Множественные фоны
• Тип данных
• Другие свойства, связанные с цветом: color (en-US), border-color (en-US), outline-color , text-decoration-color (en-US), text-emphasis-color (en-US), text-shadow , caret-color (en-US), и column-rule-color
• Применение цвета к HTML элементам с помощью CSS

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как задать цвет фона и текста веб-страницы?

Для изменения цвета фона всей веб-страницы применяется свойство background-color (или универсальное background), которое добавляется к селектору body , а для цвета текста используется свойство color, как показано в примере 1.

Пример 1. Изменение цвета фона

Результат данного примера показан на рис. 1.

Рис. 1. Вид веб-страницы с тёмным фоном

См. также

• background-color
• color
• currentColor
• text-fill-color
• Атрибут bgcolor
• Атрибут link
• Единицы цвета в CSS
• Наследование в CSS
• Работа с типографикой
• Фон в CSS