aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/css/background-image/index.html
blob: fa163b19dfd5fba7edaac48ac42b01f583c12381 (plain)
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
---
title: background-image
slug: Web/CSS/background-image
tags:
  - CSS
  - CSS Background
  - CSS Property
  - Reference
translation_of: Web/CSS/background-image
---
<div>{{CSSRef}}</div>

<h2 id="Краткое_описание">Краткое описание</h2>

<p>Свойство <a href="/ru/docs/CSS" title="/ru/docs/CSS">CSS</a>  <strong><code>background-image</code></strong> устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.</p>

<p><a href="/ru/CSS/border" title="border">Границы</a> {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и ее границ, определяется CSS свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.</p>

<p>Если указанное изображение не может быть нарисовано (например, когда файл, определенный указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением <code>none</code>.</p>

<div class="note"><strong>Обратите внимание:</strong> Даже, если изображение непрозначно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать аттрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.</div>

<p>{{cssinfo}}</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="brush: css notranslate">background-image: none;
background-image: url(http://www.example.com/bck.png);

background-image: inherit;
</pre>

<h3 id="Значения">Значения</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>Это ключевое слово обозначает отсутствие изображений.</dd>
 <dt><code>&lt;image&gt;</code></dt>
 <dd>{{cssxref("&lt;image&gt;")}} обозначает изображение для отображения. Их может быть несколько, разделенных запятыми, поскольку поддерживается<a href="/ru/docs/CSS/Multiple_backgrounds" title="Multiple backgrounds"> несколько фонов</a>.</dd>
</dl>

<h3 id="Официальный_синтаксис">Официальный синтаксис</h3>

<pre class="syntaxbox notranslate">{{csssyntax("background-image")}}
</pre>

<h2 id="Примеры">Примеры</h2>

<h3 id="Multiple_backgrounds_and_transparency" name="Multiple_backgrounds_and_transparency">Несколько фонов и прозрачность</h3>

<p>Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.</p>

<h4 id="HTML_содержимое">HTML содержимое</h4>

<pre class="brush: html notranslate">&lt;div&gt;
    &lt;p class="catsandstars"&gt;
        This paragraph is full of cats&lt;br /&gt;and stars.
    &lt;/p&gt;
    &lt;p&gt;This paragraph is not.&lt;/p&gt;
    &lt;p class="catsandstars"&gt;
        Here are more cats for you.&lt;br /&gt;Look at them!
    &lt;/p&gt;
    &lt;p&gt;And no more.&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="CSS_содержимое">CSS содержимое</h4>

<pre class="brush: css notranslate">pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
}

div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}
</pre>

<p>{{EmbedLiveSample('Multiple_backgrounds_and_transparency')}}</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', '#background-image', 'background-image')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Начиная с CSS2 Revision 1, свойство было расширено для поддержки нескольких фонов и любого типа данных CSS {{cssxref("&lt;image&gt;")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Начиная с CSS1, теперь описывается способ обработки изображений с внутренними размерами и без них.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#background-image', 'background-image')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}[1]</td>
   <td>4.0</td>
   <td>3.5</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td>Multiple backgrounds</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
   <td>9.0</td>
   <td>yes</td>
   <td>1.3</td>
  </tr>
  <tr>
   <td>Gradients</td>
   <td>1.0{{property_prefix("-webkit")}}</td>
   <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}</td>
   <td>10</td>
   <td>11+{{property_prefix("-o")}}</td>
   <td>4.0{{property_prefix("-webkit")}}</td>
  </tr>
  <tr>
   <td>SVG images</td>
   <td>8.0</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>9.0</td>
   <td>9.5</td>
   <td>5.0 [2]</td>
  </tr>
  <tr>
   <td><code>element</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-moz")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>image-rect</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-moz")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Any {{cssxref("&lt;image&gt;")}} value.</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>iOS Safari</th>
   <th>Opera Mini</th>
   <th>Opera Mobile</th>
   <th>Android Browser</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>yes</td>
   <td>yes</td>
   <td>yes</td>
   <td>yes</td>
  </tr>
  <tr>
   <td>Multiple backgrounds</td>
   <td>yes</td>
   <td>yes</td>
   <td>yes</td>
   <td>yes</td>
  </tr>
  <tr>
   <td>Gradients</td>
   <td>yes {{property_prefix("-webkit")}}<br>
    old webkit syntax for iOS 4.2 and older</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>yes{{property_prefix("-webkit")}}<br>
    old webkit syntax</td>
  </tr>
  <tr>
   <td>SVG images</td>
   <td>yes [2]</td>
   <td>yes</td>
   <td>yes</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>element</code></td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-moz")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>image-rect</code></td>
   <td>{{CompatVersionUnknown}}{{property_prefix("-moz")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Any {{cssxref("&lt;image&gt;")}} value</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Если пользовательские настройки <code>browser.display.use_document_colors</code> в <code>about:config</code> установлены на <code>false</code>, фоновые изображения не будут отображаться.</p>

<p>[2] Поддержка SVG в CSS background является неполной в текущей версии iOS Safari (5.0). То же самое для Safari до 5.0.</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/ru/docs/Web/Guide/CSS/CSS_Image_Sprites">CSS спрайты изображений</a></li>
 <li>{{HTMLElement("img")}}</li>
 <li>Статьи, связанные с изображениями:: {{cssxref("&lt;image&gt;")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}.</li>
</ul>