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-repeat/index.html | 209 ++++++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 files/ru/web/css/background-repeat/index.html (limited to 'files/ru/web/css/background-repeat') diff --git a/files/ru/web/css/background-repeat/index.html b/files/ru/web/css/background-repeat/index.html new file mode 100644 index 0000000000..9493b0ab8d --- /dev/null +++ b/files/ru/web/css/background-repeat/index.html @@ -0,0 +1,209 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-repeat +--- +
+

{{CSSRef}}

+ +

Свойство background-repeat устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.

+ +
{{EmbedInteractiveExample("pages/css/background-repeat.html")}}
+ +

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

+ +

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round) или равномерно растянуть от конца к концу (используя space).

+
+ +

 

+ +

Синтаксис

+ +
/*Ключевые значения*/
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+​​​​​​​background-repeat: space;
+​​​​​​​background-repeat: round;
+​​​​​​​background-repeat: no-repeat;
+
+/*Два значения: горизонтальное | вертикальное*/
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* Глобальные значения */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+ +

Значения

+ +
+
<repeat-style>
+
Следующие однозначные имеют двухзначные эквиваленты:
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
repeat-xтоже самое, что и repeat no-repeat
repeat-yтоже самое, что и no-repeat repeat
repeatтоже самое, что и repeat repeat
spaceтоже самое, что и space space
roundтоже самое, что и round round
no-repeatтоже самое, что и no-repeat no-repeat
+ В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.
+ + + + + + + + + + + + + + + + + + + + +
repeatИзображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.
spaceИзображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства {{cssxref("background-position")}} игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фоновго изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение space.
roundИзображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.
no-repeatИзображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS свойством {{cssxref("background-position")}}.
+
+
+ +

Примеры

+ +

HTML

+ +
<ol>
+    <li>no-repeat
+        <div class="one">&nbsp;</div>
+    </li>
+    <li>repeat
+        <div class="two">&nbsp;</div>
+    </li>
+    <li>repeat-x
+        <div class="three">&nbsp;</div>
+    </li>
+    <li>repeat-y
+        <div class="four">&nbsp;</div>
+    </li>
+    <li>repeat-x, repeat-y (multiple images)
+        <div class="five">&nbsp;</div>
+    </li>
+</ol>
+ +

CSS

+ +
/* Совместно для всех DIVS в примере */
+li {margin-bottom: 12px;}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 144px;
+    height: 84px;
+}
+
+/* повторение фона CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+/* Несколько изображений */
+.five {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}
+ +

Результат

+ +

В этом примере каждому элементу списка соответствует другое значение background-repeat.

+ +

{{EmbedLiveSample('Examples', 240, 360)}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов space и round, а также для фона на элементе на уровне строки путем точного определения области рисования фона.
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}Без существенных изменений
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}} 
+ +

{{cssinfo}}

+ +

Поддержка браузеров

+ +

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

+ +

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

+ + + +

 

-- cgit v1.2.3-54-g00ecf