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/index.html | 135 +++++++++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 files/ru/web/css/background/index.html (limited to 'files/ru/web/css/background') diff --git a/files/ru/web/css/background/index.html b/files/ru/web/css/background/index.html new file mode 100644 index 0000000000..3835bece7c --- /dev/null +++ b/files/ru/web/css/background/index.html @@ -0,0 +1,135 @@ +--- +title: background +slug: Web/CSS/background +translation_of: Web/CSS/background +--- +
{{CSSRef("CSS Background")}}
+ +
Сокращенное CSS свойство background  устанаваливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.
+ +
+ +
{{EmbedInteractiveExample("pages/css/background.html")}}
+ +

Исходный код этого интерактивного примера хранится в репозитории GitHub.  Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение..

+ +

Свойство является сокращением, которое устанавливает следующие свойства в одном объявлении: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, и {{cssxref("background-attachment")}}.

+ +

Как и во всех сокращенных свойствах, любые пропущенные вложенные значения будут установлены в свои изначальные значения.

+ + + +

Синтаксис

+ +
/* Использование свойства <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");
+
+ +
Предупреждение: {{cssxref("background-color")}} можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.
+ +

Значения

+ +

Свойству можно указывать одно или более значений из данного списка в любом порядке:

+ +
+
<attachment>
+
Смотри {{cssxref("background-attachment")}}
+
<box>
+
Смотри {{cssxref("background-clip")}}
+
<background-color>
+
Смотри {{cssxref("background-color")}}
+
<bg-image>
+
Смотри {{Cssxref("background-image")}}
+
<position>
+
Смотри {{cssxref("background-position")}}
+
<repeat-style>
+
Смотри {{cssxref("background-repeat")}}
+
<bg-size>
+
Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <position>, разделенного символом '/'.
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Примеры

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: red;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+
+ +

Результат

+ +

{{EmbedLiveSample("Примеры")}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}Поддержка мультифонов и свойств {{cssxref("background-size")}}, {{cssxref("background-origin")}} и {{cssxref("background-clip")}}.
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}Нет значительных изменений
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}Первоначальное определение
+ +

{cssinfo}}

+ +

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

+ + + + + +

{{Compat("css.properties.background")}}

+ +

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

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