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
|
---
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>{{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>
{{csssyntax}}
<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>
{{Specifications}}
<p>{cssinfo}}</p>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat}}</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>
|
