diff options
Diffstat (limited to 'files/ru/web/css/background-repeat/index.html')
| -rw-r--r-- | files/ru/web/css/background-repeat/index.html | 209 |
1 files changed, 209 insertions, 0 deletions
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 +--- +<div> +<p>{{CSSRef}}</p> + +<p>Свойство <strong><code>background-repeat</code></strong> устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.</p> + +<div>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</div> + +<p>Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на извлечение.</p> + +<p>По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя <code>round</code>) или равномерно растянуть от конца к концу (используя <code>space</code>).</p> +</div> + +<p> </p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre><code>/*Ключевые значения*/ +background-repeat: repeat-x; +background-repeat: repeat-y;</code> +<code>background-repeat: repeat;</code> +<code>background-repeat: space;</code> +<code>background-repeat: round;</code> +<code>background-repeat: no-repeat;</code> + +/*Два значения: горизонтальное | вертикальное*/ +<code>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;</code></pre> + +<h3 id="Значения">Значения</h3> + +<dl> + <dt><code><em><</em>repeat-style<em>></em></code></dt> + <dd>Следующие однозначные имеют двухзначные эквиваленты:</dd> + <dd> + <table class="standard-table"> + <tbody> + <tr> + <td><code>repeat-x</code></td> + <td>тоже самое, что и <code>repeat no-repeat</code></td> + </tr> + <tr> + <td><code>repeat-y</code></td> + <td>тоже самое, что и <code>no-repeat repeat</code></td> + </tr> + <tr> + <td><code>repeat</code></td> + <td>тоже самое, что и <code>repeat repeat</code></td> + </tr> + <tr> + <td><code>space</code></td> + <td>тоже самое, что и <code>space space</code></td> + </tr> + <tr> + <td><code>round</code></td> + <td>тоже самое, что и <code>round round</code></td> + </tr> + <tr> + <td><code>no-repeat</code></td> + <td>тоже самое, что и <code>no-repeat no-repeat</code></td> + </tr> + </tbody> + </table> + В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.<br> + + <table class="standard-table"> + <tbody> + <tr> + <td><code>repeat</code></td> + <td>Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.</td> + </tr> + <tr> + <td><code>space</code></td> + <td>Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства {{cssxref("background-position")}} игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фоновго изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение <code>space</code>.</td> + </tr> + <tr> + <td><code>round</code></td> + <td>Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.</td> + </tr> + <tr> + <td><code>no-repeat</code></td> + <td>Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS свойством {{cssxref("background-position")}}.</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; +}</pre> + +<h3 id="Результат">Результат</h3> + +<p>В этом примере каждому элементу списка соответствует другое значение <code>background-repeat</code>.</p> + +<p>{{EmbedLiveSample('Examples', 240, 360)}}</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', '#the-background-repeat', 'background-repeat')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td>Добавлена поддержка изображений с несколькими фонами, синтаксис с двумя значениями, обеспечивающий различное поведение повторения для горизонтального и вертикального направлений, ключевых слов <code>space</code> и <code>round</code>, а также для фона на элементе на уровне строки путем точного определения области рисования фона.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Без существенных изменений</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Поддержка_браузеров">Поддержка браузеров</h2> + +<p>{{Compat("css.properties.background-repeat")}}</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li> + <p id="Using_CSS_multiple_backgrounds"><a href="/ru/docs/CSS/Using_CSS_multiple_backgrounds" title="CSS/Using_CSS_multiple_backgrounds">Использование нескольких CSS фонов</a></p> + </li> +</ul> + +<p> </p> |