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
|
---
title: repeating-linear-gradient()
slug: Web/CSS/repeating-linear-gradient()
translation_of: Web/CSS/repeating-linear-gradient()
---
<div>{{CSSRef}}</div>
<p><a href="/en-US/docs/Web/CSS">CSS</a> функция <strong><code>repeating-linear-gradient()</code></strong> создаёт изображение состоящее из повторяющихся линейных градиентов. Она схожа с {{cssxref("linear-gradient")}} и принимает те же аргументы, но повторяет переходы цветов бесконечно во всех направлениях покрывая весь контейнер. Функция возвращает объект типа {{cssxref("<gradient>")}}, являющегося разновидностью типа данных {{cssxref("<image>")}}.</p>
<pre class="brush: css no-line-numbers notranslate">/* Повторяющийся градиент с углом наклона 45 градусов,
начинающийся с синего и заканчивающийся красным цветом */
repeating-linear-gradient(45deg, blue, red);
/* Повторяющийся градиент идущий от нижнего правого угла к верхнему левому,
начинающийся с синего и заканчивающийся красным цветом */
repeating-linear-gradient(to left top, blue, red);
/* Повторяющийся градиент идущий от низа к верху,
начинающийся с синего, переходящего в зелёный на 40%,
и заканчивающийся красным цветом */
repeating-linear-gradient(0deg, blue, green 40%, red);
</pre>
<p>С каждым повтором позиции цветов сдвигаются на величину кратную длине базового градиента (расстояние от позиции последнего цвета до позиции первого). Таким образом что позиция каждого последнего цвета совпадает с позицией стартового цвета. И если цвета отличаются это приведёт к резкому визуальному переходу.</p>
<p>Повторяющийся линейный градиент (как и любой прочий градиент) <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">не имеет размерностей по умолчанию</a>; т.е. у него нет предопределённого размера либо пропорции. Его размер будет совпадать с размерами элемента к которому он применен.</p>
<div class="note">
<p><strong>Примечание:</strong> Поскольку <code><gradient></code> относится к типу данных <code><image></code> , он может быть использован только там где применим тип <code><image></code>. По этой причине <code>repeating-linear-gradient()</code> не будет работать с {{Cssxref("background-color")}} и прочими свойствами использующими тип данных {{cssxref("<color>")}}.</p>
</div>
<h2 id="Синтаксис">Синтаксис</h2>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code><сторона-или-угол></code></dt>
<dd>Положение точки начала линии градиента. Начинается со слова <code>to</code> и максимум двух ключевых слов: одно определяет сторону по горизонтали (<code>left</code> или <code>right</code>), и другое сторону по вертикали (<code>top</code> или <code>bottom</code>). Порядок ключевых слов определяющих сторону не важен. Если они не определены, по умолчанию используется <code><span class="css">to</span></code><span class="css"> </span><code><span class="css">bottom</span></code>.</dd>
<dd>Значения <code>to top</code>, <code>to bottom</code>, <code>to left</code>, и <code>to right</code> эквивалентны углам <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, и <code>90deg</code> соответственно. Прочие значения транслируются в угол.</dd>
<dt>{{cssxref("<angle>", "<угол>")}}</dt>
<dd>Угол наклона линии направления градиента. Значение <code>0deg</code> эквивалентно <code>to top</code>; увеличение значения приводит к повороту линии против часовой стрелки начиная от этой величины (<code>0deg</code>).</dd>
<dt><code><цвет-позиция></code></dt>
<dd>Значение {{cssxref("<color>", "<цвета>")}} с последующей (необязательной) его позицией (либо в {{cssxref("<percentage>", "<процентах>")}}, либо в единицах {{cssxref("<length>", "<длины>")}} вдоль оси градиента).</dd>
<dd>
<div class="note">
<p><strong>Примечание:</strong> Рендер <a href="#Gradient_with_multiple_color_stops">перехода цветов в CSS градиентах</a> следует тем же правилам что и в <a href="/en-US/docs/Web/SVG/Tutorial/Gradients">SVG градиентах</a>.</p>
</div>
</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox notranslate">repeating-linear-gradient( [ <a href="/en-US/CSS/angle"><угол></a> | to <сторона-или-угол> ,]? <цвет-позиция> [, <цвет-позиция>]+ )
\---------------------------------/ \----------------------------/
Определение линии градиента Список цветов и их позиций
где <code><</code>сторона-или-угол<code>> = [left | right] || [top | bottom]</code>
и <code><</code>цвет-позиция<code>> = <цвет> [ <процент> | <длина> ]?</code>
</pre>
<h2 id="Примеры">Примеры</h2>
<h3 id="Полоски_зебры">Полоски зебры</h3>
<div class="hidden">
<pre class="brush: css notranslate">body {
width: 100vw;
height: 100vh;
}</pre>
</div>
<pre class="brush: css notranslate">body {
background-image: repeating-linear-gradient(-45deg,
transparent,
transparent 20px,
black 20px,
black 40px);
}
</pre>
<p>{{EmbedLiveSample('Полоски_зебры', 120, 120)}}</p>
<h3 id="Повторяющиеся_горизонтальные_полосы">Повторяющиеся горизонтальные полосы</h3>
<div class="hidden">
<pre class="brush: css notranslate">body {
width: 100vw;
height: 100vh;
}</pre>
</div>
<pre class="brush: css notranslate">body {
background-image: repeating-linear-gradient(to bottom,
rgb(26,198,204),
rgb(26,198,204) 7%,
rgb(100,100,100) 10%);
}
</pre>
<p>{{EmbedLiveSample('Повторяющиеся_горизонтальные_полосы', 120, 120)}}</p>
<div class="note">
<p><strong>Примечание:</strong> Для дополнительных примеров пожалуйста обратитесь к статье <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Using CSS gradients</a>.</p>
</div>
<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 Images', '#repeating-gradients', 'repeating-linear-gradient()')}}</td>
<td>{{Spec2('CSS3 Images')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<div>{{Compat("css.types.image.gradient.repeating-linear-gradient")}}</div>
<h2 id="Дополнительно">Дополнительно</h2>
<ul>
<li><a href="/en/CSS/Using_CSS_gradients">Using CSS gradients</a></li>
<li>Другие функции градиентов: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-radial-gradient")}}</li>
</ul>
|
