1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: background-color
slug: Web/CSS/background-color
tags:
- CSS
- CSS-свойства
- CSS фоны
- Графика
- Определение
- Раскладка
translation_of: Web/CSS/background-color
---
<div>{{CSSRef}}</div>
<p><a href="/ru/docs/Web/CSS">CSS</a>-свойство <strong><code>background-color</code></strong> <a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> устанавливает цвет фона элемента.</p>
<p>{{EmbedInteractiveExample("pages/css/background-color.html")}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: css no-line-numbers">/* Словесные значения */
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.0 - полностью прозрачный */
background-color: rgba(117, 190, 218, 0.5); /* 0.5 - полупрозрачный */
background-color: rgba(117, 190, 218, 1.0); /* 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;
</pre>
<div>Свойство <code>background-color</code> определяется единственным значением <code><a href="#<color>"><color></a></code>.</div>
<h3 id="Values">Значения</h3>
<dl>
<dt>{{cssxref("<color>")}}</dt>
<dd>Является CSS {{cssxref("<color>")}}, которое описывает цвет фона. Даже если заданы одно или несколько {{cssxref("background-image")}}, цвет может отрендерится, если изображения прозрачны.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Примеры">Примеры</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div class="exampleone">
Lorem ipsum dolor sit amet, consectetuer
</div>
<div class="exampletwo">
Lorem ipsum dolor sit amet, consectetuer
</div>
<div class="examplethree">
Lorem ipsum dolor sit amet, consectetuer
</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight:[2,7,12,17];">.exampleone {
background-color: teal;
color: white;
}
.exampletwo {
background-color: rgb(153, 102, 153);
color: rgb(255, 255, 204);
}
.examplethree {
background-color: #777799;
color: #FFFFFF;
}
</pre>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample("Примеры","200","150")}}</p>
<h2 id="Проблемы_доступности">Проблемы доступности</h2>
<p>Важно обеспечить достаточный цветовой контраст между цветом текста и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.</p>
<p>Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям <a href="https://www.w3.org/WAI/intro/wcag" rel="noopener">Web Content Accessibility Guidelines (WCAG)</a>, требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.</p>
<ul>
<li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li>
<li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="Specifications">Спецификации</h2>
{{Specifications}}
<p>{{cssinfo}}</p>
<h2 id="Browser_Compatibility">Совместимость с браузерами</h2>
<p>{{Compat}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>
<p><a href="/ru/docs/Web/CSS/CSS_Background_and_Borders/Множественные_фоны">Множественные фоны</a></p>
</li>
<li>
<p>Тип данных {{cssxref("<color>")}}</p>
</li>
<li>Другие свойства, связанные с цветом: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, и {{cssxref("column-rule-color")}}</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Applying_color">Применение цвета к HTML элементам с помощью CSS</a></li>
</ul>
|
