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
Свойство, раскрашивающее фон элемента в яркие краски!
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Светлана Коробцева ,
- Антон Капустинский
Обновлено 28 августа 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
При помощи свойства background — color можно задать цвет фона элемента. Задать фоновый цвет можно любому элементу — строчному (inline), блочному (block) или строчно-блочному (inline-block).
Пример
Скопировать ссылку «Пример» Скопировано
Розовый — цвет, образующийся.
Жёлтый — самый лёгкий и яркий цвет.Английское слово blue.p class="block">Розовый — цвет, образующийся. p> span class="inline">Жёлтый — самый лёгкий и яркий цвет. span> div class="inline-block">Английское слово blue. div>
.block background-color: rgb(244, 152, 173);> .inline background-color: yellow;> .inline-block background-color: #2E9AFF;>.block background-color: rgb(244, 152, 173); > .inline background-color: yellow; > .inline-block background-color: #2E9AFF; >
В примере выше показаны блоки всех трёх типов отображения. С фоном для блочных и строчно-блочных элементов проблем не возникает, а вот со строчными элементами всё не так просто.
Если высота строки ( line — height ) у строчного элемента будет больше 1, то между строками будут пробелы.
Но в заливке фона строчных элементов есть и преимущества! На последней строке фон заканчивается ровно там, где заканчивается текст.
Помимо этой особенности, в CSS-коде видно, что в качестве значения для background — color можно использовать любое доступное обозначение цвета в вебе.
Как понять
Скопировать ссылку «Как понять» Скопировано
Свойство background — color меняет цвет фона любого элемента.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Для нужного селектора указываем свойства background — color и после двоеточия указываем цвет фона в любом доступном для веба формате.
.element background-color: black;>.element background-color: black; >
.element background-color: #ffffff;>.element background-color: #ffffff; >
.element background-color: #ffffff80;>.element background-color: #ffffff80; >
.element background-color: rgb(255 255 0 / 0.5);>.element background-color: rgb(255 255 0 / 0.5); >
Помимо цвета можно задать прозрачный фон при помощи ключевого слова transparent .
Это бывает полезно для изменения цвета при наведении курсора.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Свойство фона не наследуется.
�� Значение по умолчанию — прозрачный фон: transparent .
�� Фон нельзя задать частично. Блок заливается указанным цветом полностью.
�� В качестве значения можно указать только один цвет.
�� Изменение цвета фона можно анимировать при помощи свойства transition ��
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Если нужна красивая кнопка ( ), то не забудьте сбросить фон: укажите для неё background — color : transparent . Или тот цвет фона, который нужен по дизайну. По умолчанию у всех кнопок серый фон с приветом из девяностых.
�� Аналогичным способом можно сделать красивые прозрачные поля ввода ( input ) в формах.
Email:form class="form"> label> span class="label">Email:span> input class="input" type="text" placeholder="Введите ваш email"> label> button class="button">Подписатьсяbutton> form>
.form /* Фон для всей формы */ background-color: #18191C;> .input /* Прозрачное поле ввода */ background-color: transparent;> .button /* Чёрный фон для кнопки */ background-color: #2E9AFF;> .button:hover /* Белый фон при наведении курсора */ background-color: #FFFFFF;>.form /* Фон для всей формы */ background-color: #18191C; > .input /* Прозрачное поле ввода */ background-color: transparent; > .button /* Чёрный фон для кнопки */ background-color: #2E9AFF; > .button:hover /* Белый фон при наведении курсора */ background-color: #FFFFFF; >
�� Если вам нужен градиент, то background — color вам не подойдёт. Градиенты можно задать только при помощи background — image .
�� Если нужен блок с «рваным» краем, но без пробела между строками, то для этого есть множество трюков. Один из них:
Чем отличается маркер от текстовыделителя? Текстовыделительные маркеры заправляются флуоресцентными полупрозрачными чернилами. Они не покрывают поверхность бумаги плотным слоем, не пропускающим свет, как это делают обычные маркеры на водной или спиртовой основе.p> Чем отличается маркер от текстовыделителя? span class="bkg"> Текстовыделительные маркеры заправляются флуоресцентными полупрозрачными чернилами. Они не покрывают поверхность бумаги плотным слоем, не пропускающим свет, как это делают обычные маркеры на водной или спиртовой основе. span> p>
.bkg background-color: #F498AD; /* Тень для каждой строки, перекрывающая пробел */ box-shadow: 0 4px 0 #F498AD;>.bkg background-color: #F498AD; /* Тень для каждой строки, перекрывающая пробел */ box-shadow: 0 4px 0 #F498AD; >
�� С помощью полупрозрачного фонового цвета у псевдоэлемента можно создать красивый оверлей поверх фотографий или фоновых изображений. Это круто, потому что фоном можно будет ставить любую фотографию, и она в большинстве случаев не будет выбиваться из дизайна.
The best site all over the world!
header> h1>The best site all over the world!h1> header>
header /* Чтобы псевдоэлемент считал своё положение от этого блока */ position: relative; z-index: 0; /* Фоновое изображение на всю ширину и высоту блока */ background: url("background.png") no-repeat center / cover;> header:before content: ""; position: absolute; z-index: -1; display: block; top: 0; left: 0; width: 100%; height: 100%; /* Оверлей поверх картинки с прозрачностью 50% */ background-color: rgba(0, 79, 130, 0.5);>header /* Чтобы псевдоэлемент считал своё положение от этого блока */ position: relative; z-index: 0; /* Фоновое изображение на всю ширину и высоту блока */ background: url("background.png") no-repeat center / cover; > header:before content: ""; position: absolute; z-index: -1; display: block; top: 0; left: 0; width: 100%; height: 100%; /* Оверлей поверх картинки с прозрачностью 50% */ background-color: rgba(0, 79, 130, 0.5); >
Для .header можно задать любую картинку фоном, и поверх неё всегда будет голубой оверлей ��♀️
transparent это обман?
Высокое разрешение (Full HD 1920×1080) это обман?
Прикол в том, что на низком разрешении, но при масштабировании через Ctrl + шрифт становится такой.
Обновление BIOS с сайта www.esupport.com, это возможно или обман ?
В программе EVEREST я получила отчет о системе виндоус. Там была дана ссылка,что ваш биос.
Не обман?
Здорово, пацаны. Наткнулся тут на вакансию и думаю не обман ли это.
Обман?
Всем доброго дня! 11классник обучающийся на подготовительные курсах Мфти, заверяющий нас что из.
701 / 573 / 59
Регистрация: 18.11.2008
Сообщений: 2,147
Сообщение от alёxa 
Почему не прозрачное?
ты эту прозрачность задаешь для body, какую прозрачность ты хочешь увидеть? рабочий стол сквозь страницу? так не получится ибо body это не браузер
356 / 315 / 48
Регистрация: 21.04.2009
Сообщений: 574
Сообщение от alёxa
Почему не прозрачное?
нужно задавать прозрачность например к блоку div, тогда он будет прозрачным отностительно фона страницы .
Регистрация: 06.02.2010
Сообщений: 45
Интересно, почему нам учитель web-дизайна это сказал.
701 / 573 / 59
Регистрация: 18.11.2008
Сообщений: 2,147
а что он сказал этот код должен делать? вернее что именно должно стать прозрачным?
вообщем, либо ты неправильно его понял, либо учитель плохо разбирается в html
Добавлено через 3 минуты
хотя судя по тому, что этот учитель web-дизайна(!) для body прозрачный фон задает, то ему самому следует подучиться
Регистрация: 06.02.2010
Сообщений: 45
Я не знаю то, что он сделал сайт школы
Мне наверное показалось http://239.ru
Сам посмотри
2815 / 1406 / 107
Регистрация: 07.03.2009
Сообщений: 4,446
alёxa, я не хочу гнать на вашего учителя . но я, программист С++ по образованию, сделаю сайт по красивше 🙂
701 / 573 / 59
Регистрация: 18.11.2008
Сообщений: 2,147
Сообщение от alёxa
Я не знаю то, что он сделал сайт школы
Мне наверное показалось http://239.ru
Сам посмотри
если ваш учитель до сих пор такие сайты делает, то лучше у него не учиться
ибо можно совсем не тому научиться
Регистрация: 06.02.2010
Сообщений: 45
Ладно хватит уже об этом.
Регистрация: 22.02.2010
Сообщений: 9
alёxa, на самом деле. такой сайт я делал ну в числе первых.
мне показалось или шапка кривая?)
честно скажу учителя html не знают нифига:D
наша преподша объясняла нам html как нупам, а потом когда я спросил у нее одну вещь в css так она вообще спросила «а что это?»
Регистрация: 22.02.2010
Сообщений: 7
transparent, кстати, стандартное значение для любого background-color. Он нужен в том случае, когда нам не нужен фон у элемента. Создай простой div — он уже прозрачный. Иначе задаёшь цвет.
А если нужна неполная прозрачность, то в css3 такой цвет (в смысле с учётом этой самой полупрозрачности) можно задать так: rgba(255,0,0,0.5); — красный, наполовину прозрачный. Есть и другие способы, которые мб и лучше, так как css3 не всем ещё понимается.
ps Весёлое название темы, да, тебя обманывают, это заговор w3c
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Обман с GPS
Добрый день. Работаю в такси. Задача следующая: Рассчет стоимости заказа идет по километражу, на.
Обман Доцента
Добрый вечер Уважаемые! Зовут меня Сергей Андреевич, являюсь преподавателем СамГТУ. Сегодня мне.
Обман СКУД
В общем как бы сказал Кузя из универа это "потеря потерь". В офис установили адскую машину.
Ох уж эти CSS-переменные
Я люблю создавать компоненты везде и всегда, поэтому пользовательские CSS-свойства, также известные как CSS-переменные, являются одной из моих любимых фишек, которая позволяет писать более модульный код. При работе с ними я набил достаточно шишек, выпил литры чая и убил кучу времени. Теперь я «мастер», и хочу поделиться своим опытом.
▍ Разрешённые символы при именовании
Однажды я наткнулся примерно на следующий фрагмент кода:
:root < --component-font-size: 20px; >.component
Для меня нижнее подчёркивание — это прямая отсылка к старому соглашению, которое использовалось в JS для создания «внутренних» свойств объекта. Я удивился, что в CSS так тоже можно!
Как говорится в спецификации CSS Custom Properties for Cascading Variables Module Level 1, название пользовательского свойства — это специальный CSS-идентификатор , начинающийся с — . Одновременно к нему применимы правила синтаксиса CSS-идентификатора , описанного в стандарте CSS Syntax Module Level 3. По правилам мы можем использовать символы [a-zA-Z0-9] , дефис — , подчёркивание _ и другие ASCII-символы, если их экранировать.
Поэтому предыдущий фрагмент кода абсолютно правильный. А самое интересное, что следующий фрагмент кода тоже!
body
Честно говоря, если бы меня спросили на собеседовании, корректный ли этот код, то я бы точно сказал нет. Предыдущий пример взорвал мне мозг, но он не единственный.
▍ Разрешены символы не только латиницы
Однажды я потратил несколько часов, чтобы найти ошибку. Браузер не определял значение для пользовательского свойства. Для объяснения я сократил тот код до следующего:
body
Вы думаете, цвет фона у элемента body стал красным? Вот я также думал. А он не был красным. Я стал инспектировать код и увидел, что ошибки нет. Но по какой-то причине значение red не применялось для пользовательского свойства —color . После медитации над кодом я решил просто скопировать —color и вставить его для свойства background-color . Код заработал.
Оказывается, дело в том, что при именовании пользовательских свойств мы можем использовать как латинские символы, так и кириллические. И случайно в строке —color: red я напечатал первую с на английском языке, а в строке background-color: var(—сolor) уже на русском. С точки зрения браузера это два разных пользовательских свойства, и поэтому значение не применялось.
Одно дело, когда перепутал один символ, но следующий код также будет рабочим:
body
Фон у элемента body будет красный. Честно, я не знаю, почему браузеры могут обрабатывать символы на русском языке. Я пытался нагуглить, почему код работает. Ничего не нашёл. Если вам известен ответ, то, пожалуйста, поделитесь в комментариях.
▍ Некорректное значение не вызывает ошибки
Мы рассмотрели нюансы при именовании пользовательских свойств, но кроме них есть ещё моменты, которые сбивают с толку при работе с ними. В качестве первого примера рассмотрим код, в котором передано некорректное значение 10px через пользовательское свойство —not-a-background-color для свойства background-color . Как думаете, какое итоговое значение будет во вкладке Computed?
:root < --not-a-background-color: 10px; >.container
Можно подумать, что lightgoldenrodyellow , но нет. Правильный ответ — transparent .
В стандарте сказано, что если при замене пользовательского свойства получается некорректное значение для свойства, то браузеры вместо него будут использовать корректное. Оно вычисляется в зависимости от свойства. Если оно наследуемое, то значение передаётся в результате наследования. Если нет, используется начальное ( initial ) значение.
В предыдущем примере после замены var(—not-a-background-color) браузеры определяют, что значение 10px некорректное. Далее они проверяют, можно ли унаследовать значение. Свойство background-color не наследуется, поэтому подставляется начальное значение, т. е. transparent .
:root < --not-a-background-color: 10px; >.container < background-color: lightgoldenrodyellow; background-color: var(--not-a-background-color); /* после замены var(--not-a-background-color) будет background-color: transparent */ >А если бы у нас было свойство, которое можно наследовать, например font-size , то значение было унаследованное.
:root < --not-a-font-size: lightgoldenrodyellow; >body < font-size: 10px; >.container < font-size: 20px; font-size: var(--not-a-font-size); /* после замены var(--not-a-font-size) будет font-size: 10px */ >▍ Краткая форма свойства
При работе с пользовательскими свойствами важно помнить, как они работают внутри свойств, которые являются краткой формой для других свойств, т. е свойства padding , margin , border и т. п. В качестве примера я определил свойство border и передал только два значения:
:root < --border-width: 2px; --border-style: solid; >.container
Согласно стандарту, в случае отсутствия хотя бы одного значения браузеры не могут найти все составляющие свойства. В результате они не могут применить определённые нами значения. Так произошло в моём примере. В devTools мы увидим, что значения переданы, но свойство border не применилось.
▍ Пользовательские свойства — это не переменные
Пользовательские свойства часто сравнивают с переменными из любого языка программирования, но это не так! Для примера создам градиент с помощью следующего кода:
:root < --color-one: green; --color-two: blue; --gradient: linear-gradient(to bottom, var(--color-one), var(--color-two)); >.container
Браузеры отобразят его от начального цвета green до конечного blue . Но что будет, если для элемента с классом container создать «переменную» —color-one со значением red ?
:root < --color-one: green; --color-two: blue; --gradient: linear-gradient(to bottom, var(--color-one), var(--color-two)); >.container
Если бы пользовательские свойства были переменными, как в языках программирования, то градиент стал бы от начального цвета red до конечного blue . Но браузеры не сохраняют значения пользовательских свойств! Они только передают их.
:root < --color-one: green; --color-two: blue; --gradient: linear-gradient(to bottom, var(--color-one), var(--color-two)); >.container < --color-one: red; background-image: var(--gradient); /* здесь будет значение linear-gradient(to bottom, var(--color-one), var(--color-two)) */ >По этой причине мы не можем переопределять значение, которое используется в родительском правиле. Так что градиент по-прежнему будет от начального цвета green до конечного blue .
▍ !important не всегда !important
Посмотрите, пожалуйста, на следующий фрагмент кода. Как думаете, каким цветом будет текст?
.container < --text-color: red !important; color: var(--text-color); >.container
Красный? Я тоже так ответил в первый раз, и это неправильный ответ. Браузеры отобразят текст зелёным, и вот почему.
Пользовательские свойства — это полноценные свойства, поэтому если при объявлении значений для них используется !important , то он имеет приоритет только среди пользовательских свойств с таким именем. Таким образом, в примере при объявлении пользовательского свойства —text-color !important создаёт приоритет для него, а не для свойства color . А поскольку второе правило объявлено ниже по коду, то оно будет иметь приоритет по правилам специфичности.
А если мы будем использовать !important не при объявлении значения пользовательского свойства, а для свойства color , то приоритет будет уже у первого правила, поэтому текст уже будет красным.
.container < --text-color: red; color: var(--text-color) !important; >.container
▍ Ключевое слово inherit
Наследование является одним из фундаментальных принципов в CSS, и оно может сбить с толку, когда дело доходит до пользовательских свойств. Рассмотрим пример, где я использую ключевое слово inherit .
какой-то текст внутри элемента div .parent < --main-font-size: 50px; font-size: 30px; >.child
Какой размер текста будет у элемента с классом child ? Для правильного ответа нужно помнить, что пользовательские свойства — самодостаточные свойства, и для них также работает механизм наследования.
В нашем примере в строке —main-font-size: inherit с помощью ключевого слова inherit произойдёт наследование от пользовательского свойства —main-font-size , а не от свойства font-size .
.parent < --main-font-size: 50px; font-size: 30px; >.child < --main-font-size: inherit; /* здесь значение 50px */ font-size: var(--main-font-size, inherit); >После замены функции var() браузеры подставят 50px для свойства font-size , и в итоге получим font-size: 50px для элемента с классом child .
Мы рассмотрели наследование от родительского пользовательского свойства, а что будет, если его не указывать?
.parent < font-size: 30px; >.child
В этом случае браузеры не могут получить значение с помощью ключевого слова inherit из строки —main-font-size: inherit , поэтому они ничего не передадут. В этом случае будет использовано значение по умолчанию inherit , с помощью которого браузеры передадут значение 30px от свойства font-size элемента с классом parent .
.parent < font-size: 30px; >.child < --main-font-size: inherit; /* здесь нет значения */ font-size: var(--main-font-size, inherit); /* здесь будет font-size: 30px */ >▍ Вместо заключения
Мне хочется верить, что я помог больше узнать про пользовательские свойства, и вы будете использовать их без опаски. Если у вас был какой-то кейс, не описанный мной, то напишите, пожалуйста, о нём в комментариях. Мне будет интересно прочитать.