From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/background-image/index.html | 270 +++++++++++++++++++++++++++ 1 file changed, 270 insertions(+) create mode 100644 files/ru/web/css/background-image/index.html (limited to 'files/ru/web/css/background-image') diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html new file mode 100644 index 0000000000..fa163b19df --- /dev/null +++ b/files/ru/web/css/background-image/index.html @@ -0,0 +1,270 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-image +--- +
{{CSSRef}}
+ +

Краткое описание

+ +

Свойство CSS  background-image устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.

+ +

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

+ +

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

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

{{cssinfo}}

+ +

Синтаксис

+ +
background-image: none;
+background-image: url(http://www.example.com/bck.png);
+
+background-image: inherit;
+
+ +

Значения

+ +
+
none
+
Это ключевое слово обозначает отсутствие изображений.
+
<image>
+
{{cssxref("<image>")}} обозначает изображение для отображения. Их может быть несколько, разделенных запятыми, поскольку поддерживается несколько фонов.
+
+ +

Официальный синтаксис

+ +
{{csssyntax("background-image")}}
+
+ +

Примеры

+ +

Несколько фонов и прозрачность

+ +

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

+ +

HTML содержимое

+ +
<div>
+    <p class="catsandstars">
+        This paragraph is full of cats<br />and stars.
+    </p>
+    <p>This paragraph is not.</p>
+    <p class="catsandstars">
+        Here are more cats for you.<br />Look at them!
+    </p>
+    <p>And no more.</p>
+</div>
+ +

CSS содержимое

+ +
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;
+}
+
+ +

{{EmbedLiveSample('Multiple_backgrounds_and_transparency')}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#background-image', 'background-image')}}{{Spec2('CSS3 Backgrounds')}}Начиная с CSS2 Revision 1, свойство было расширено для поддержки нескольких фонов и любого типа данных CSS {{cssxref("<image>")}}.
{{SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image')}}{{Spec2('CSS2.1')}}Начиная с CSS1, теперь описывается способ обработки изображений с внутренними размерами и без них.
{{SpecName('CSS1', '#background-image', 'background-image')}}{{Spec2('CSS1')}}
+ +

Совместимость браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}[1]4.03.51.0
Multiple backgrounds1.0{{CompatGeckoDesktop("1.9.2")}}9.0yes1.3
Gradients1.0{{property_prefix("-webkit")}}{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}1011+{{property_prefix("-o")}}4.0{{property_prefix("-webkit")}}
SVG images8.0{{CompatGeckoDesktop("2.0")}}9.09.55.0 [2]
element{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
image-rect{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Any {{cssxref("<image>")}} value.{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Basic supportyesyesyesyes
Multiple backgroundsyesyesyesyes
Gradientsyes {{property_prefix("-webkit")}}
+ old webkit syntax for iOS 4.2 and older		{{CompatUnknown}}{{CompatUnknown}}yes{{property_prefix("-webkit")}}
+ old webkit syntax
SVG imagesyes [2]yesyes{{CompatNo}}
element{{CompatVersionUnknown}}{{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
image-rect{{CompatVersionUnknown}}{{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Any {{cssxref("<image>")}} value{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

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

+ +

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

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf