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
slug: Web/CSS/background
translation_of: Web/CSS/background
---
<div>{{CSSRef("CSS Background")}}</div>
<div>Сокращенное <a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background</code></strong> устанаваливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.</div>
<div></div>
<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>
<p>Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение..</p>
<p>Свойство является <a href="/en-US/docs/Web/CSS/Shorthand_properties">сокращением,</a> которое устанавливает следующие свойства в одном объявлении: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, и {{cssxref("background-attachment")}}.</p>
<p>Как и во всех сокращенных свойствах, любые пропущенные вложенные значения будут установлены в свои <a href="/en-US/docs/Web/CSS/initial_value">изначальные значения</a>.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: css">/* Использование свойства <background-color> */
background: green;
/* Использование свойств <bg-image> и <repeat-style> */
background: url("test.jpg") repeat-y;
/* Использование <box> и <background-color> */
background: border-box red;
/* Одно изображение, центрированное и масштабированное */
background: no-repeat center/80% url("../img/image.png");
</pre>
<div class="note"><strong>Предупреждение:</strong> {{cssxref("background-color")}} можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.</div>
<h3 id="Значения">Значения</h3>
<p>Свойству можно указывать одно или более значений из данного списка в любом порядке:</p>
<dl>
<dt><code><attachment></code></dt>
<dd>Смотри {{cssxref("background-attachment")}}</dd>
<dt><code><box></code></dt>
<dd>Смотри {{cssxref("background-clip")}}</dd>
<dt><code><background-color></code></dt>
<dd>Смотри {{cssxref("background-color")}}</dd>
<dt><code><bg-image></code></dt>
<dd>Смотри {{Cssxref("background-image")}}</dd>
<dt><code><position></code></dt>
<dd>Смотри {{cssxref("background-position")}}</dd>
<dt><code><repeat-style></code></dt>
<dd>Смотри {{cssxref("background-repeat")}}</dd>
<dt><code><bg-size></code></dt>
<dd>Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <strong><position></strong>, разделенного символом '/'.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Примеры">Примеры</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p class="topbanner">
Starry sky<br/>
Twinkle twinkle<br/>
Starry sky
</p>
<p class="warning">Here is a paragraph<p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush:css' highlight:[2,6];">.warning {
background: red;
}
.topbanner {
background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
}
</pre>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample("Примеры")}}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Поддержка мультифонов и свойств {{cssxref("background-size")}}, {{cssxref("background-origin")}} и {{cssxref("background-clip")}}.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Нет значительных изменений</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#background', 'background')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Первоначальное определение</td>
</tr>
</tbody>
</table>
<p>{cssinfo}}</p>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div>
<p>{{Compat("css.properties.background")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{cssxref("-moz-background-inline-policy")}}</li>
<li><a href="/en-US/docs/CSS/Using_CSS_gradients">Использование градиентов</a></li>
<li><a href="/en-US/docs/CSS/Multiple_backgrounds">Несколько backgrounds</a></li>
</ul>
|
