repeating-linear-gradient()
CSS
function
creates an image consisting of repeating linear gradients. It is similar to
linear-gradient()
and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container. The function's result is an object of the
<gradient>
data type, which is a special kind of
<image>
.
The length of the gradient that repeats is the distance between the first and last color stop. If the first color does not have a color-stop-length, the color-stop-length defaults to 0. With each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient. Thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will result in a sharp visual transition. This can be altered with repeating the first color again as the last color.
As with any gradient, a repeating linear gradient has no intrinsic dimensions ; i.e., it has no natural or preferred size, nor a preferred ratio. Its concrete size will match the size of the element it applies to.
因为
<gradient>
s belong to the
<image>
data type, they can only be used where
<image>
s can be used. For this reason,
repeating-linear-gradient()
won't work on
background-color
and other properties that use the
<color>
data type.
/* A repeating gradient tilted 45 degrees, starting blue and finishing red, repeating 3 times */ repeating-linear-gradient(45deg, blue, red 33.3%); /* A repeating gradient going from the bottom right to the top left, starting blue and finishing red, repeating every 20px */ repeating-linear-gradient(to left top, blue, red 20px); /* A gradient going from the bottom to top, starting blue, turning green after 40%, and finishing red. This gradient doesn't repeat because the last color stop defaults to 100% */ repeating-linear-gradient(0deg, blue, green 40%, red); /* A gradient repeating five times, going from the left to right, starting red, turning green, and back to red */ repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
<side-or-corner>
to
and up to two keywords: one indicates the horizontal side (
left
or
right
), and the other the vertical side (
top
or
bottom
). The order of the side keywords does not matter. If unspecified, it defaults to
to bottom
.
to top
,
to bottom
,
to left
，和
to right
are equivalent to the angles
0deg
,
180deg
,
270deg
，和
90deg
respectively. The other values are translated into an angle.
<angle>
0deg
相当于
to top
; increasing values rotate clockwise from there.
<linear-color-stop>
<color>
value, followed by one or two optional stop positions, (each being either a
<percentage>
或
<length>
along the gradient's axis). A percentage of
0%
, or a length of
0
, represents the start of the gradient; the value
100%
is 100% of the image size, meaning the gradient will not repeat.
<color-hint>
Th color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.
注意： Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients .
repeating-linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> ) \---------------------------------/ \---------------/ Definition of the gradient line List of color stops where <side-or-corner> = [left | right] || [top | bottom] and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop> and <linear-color-stop> = <color> [ <color-stop-length> ]? and <color-stop-length> = [ <percentage> | <length> ]{1,2} and <color-hint> = [ <percentage> | <length> ]
body {
width: 100vw;
height: 100vh;
}
body {
background-image: repeating-linear-gradient(-45deg,
transparent,
transparent 20px,
black 20px,
black 40px);
/* with multiple color stop lengths */
background-image: repeating-linear-gradient(-45deg,
transparent 0 20px,
black 20px 40px);
}
body {
width: 100vw;
height: 100vh;
}
body {
background-image: repeating-linear-gradient(to bottom,
rgb(26,198,204),
rgb(26,198,204) 7%,
rgb(100,100,100) 10%);
}
Because the last color stop is 10% and the gradient is vertical, each gradient in the repeated gradient is 10% of the height, fitting 10 horizontal bars.
注意： Please see Using CSS gradients 了解更多范例。
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Images Module Level 3
The definition of 'repeating-linear-gradient()' in that specification. |
候选推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
repeating-linear-gradient()
|
Chrome 完整支持 26 | Edge 完整支持 12 |
Firefox
完整支持
16
注意事项
|
IE
完整支持
10
注意事项
|
Opera
完整支持
12.1
|
Safari
完整支持
6.1
|
WebView Android 完整支持 ≤37 | Chrome Android 完整支持 26 |
Firefox Android
完整支持
16
注意事项
|
Opera Android
完整支持
12.1
|
Safari iOS
完整支持
6.1
|
Samsung Internet Android 完整支持 1.5 |
| Double-position color stops | Chrome 完整支持 71 | Edge 完整支持 79 | Firefox 完整支持 64 | IE 不支持 No | Opera 完整支持 58 | Safari 完整支持 12.1 | WebView Android 完整支持 71 | Chrome Android 完整支持 71 | Firefox Android 完整支持 64 | Opera Android 完整支持 50 | Safari iOS 完整支持 12.2 | Samsung Internet Android 完整支持 10.0 |
| Interpolation Hints / Gradient Midpoints | Chrome 完整支持 40 | Edge 完整支持 79 | Firefox 完整支持 36 | IE 不支持 No | Opera 完整支持 27 | Safari 完整支持 6.1 | WebView Android 完整支持 40 | Chrome Android 完整支持 40 | Firefox Android 完整支持 36 | Opera Android 完整支持 27 | Safari iOS 完整支持 6.1 | Samsung Internet Android 完整支持 4.0 |
to
keyword
|
Chrome 完整支持 26 | Edge 完整支持 12 | Firefox 完整支持 10 | IE 完整支持 10 | Opera 完整支持 12.1 | Safari 完整支持 6.1 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 26 | Firefox Android 完整支持 10 | Opera Android 完整支持 14 | Safari iOS 完整支持 6.1 | Samsung Internet Android 完整支持 1.5 |
Unitless
0
for <angle>
|
Chrome 完整支持 26 | Edge 完整支持 12 |
Firefox
完整支持
55
|
IE 不支持 No | Opera 完整支持 16 | Safari 完整支持 6.1 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 26 |
Firefox Android
完整支持
55
|
Opera Android 完整支持 14 | Safari iOS 完整支持 6.1 | Samsung Internet Android 完整支持 1.5 |
完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。
linear-gradient()
,
radial-gradient()
,
repeating-radial-gradient()
,
conic-gradient()
,
repeating-conic-gradient()
<image>
image()
element()
image-set()
cross-fade()