这篇翻译不完整。请帮忙从英语翻译这篇文章

CSS函数 repeating-linear-gradient() 创建一个由重复线性渐变组成的<image>, 这是一个类似 linear-gradient 的函数,并且采用相同的参数,但是它会在所有方向上重复渐变以覆盖其整个容器. 这个函数的结果是一个<gradient> 数据类型的对象, 这是一个特殊的<image>类型。

/* 一个倾斜45度的重复线性渐变,
   从蓝色开始渐变到红色 */
repeating-linear-gradient(45deg, blue, red);

/* 一个从右下角到左上角的重复线性渐变,
   从蓝色开始渐变到红色 */
repeating-linear-gradient(to left top, blue, red);

/* 一个由下至上的重复线性渐变,
   从蓝色开始,40%后变绿,
   最后渐变到红色 */
repeating-linear-gradient(0deg, blue, green 40%, red);

With each repetition, the positions of the color stops are shifted by a multiple of the length of the basic linear gradient (the distance between the last color stop and the first). 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.

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.

Usage note: Because <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.

Syntax

Values

<side-or-corner>
The position of the gradient line's starting point. If specified, it consists of the word 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.
The values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively. The other values are translated into an angle.
<angle>
The gradient line's angle of direction. It starts from to top and rotates clockwise.
<color-stop>
A color-stop's <color> value, followed by an optional stop position (either a <percentage> or a <length> along the gradient's axis).

Note: Rendering of color stops in CSS gradients follows the same rules as color stops in SVG gradients.

Formal syntax

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                            \---------------------------------/ \----------------------------/
                              Definition of the gradient line         List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
   and <color-stop>     = <color> [ <percentage> | <length> ]?

Examples

#grad1 {
  background-image: repeating-linear-gradient(180deg,
      rgb(26,198,204),
      rgb(26,198,204) 7%,
      rgb(100,100,100) 10%);
}

#grad2 {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 25px,
      rgba(255,255,255,1) 25px,
      rgba(255,255,255,1) 50px);
}
<ol>
  <li>Repeating horizontal bars
    <div id="grad1"></div>
  </li>
  <li>Zebra stripes   
    <div id="grad2"></div>
  </li>     
</ol>

Specifications

Specification Status Comment
CSS Image Values and Replaced Content Module Level 3
repeating-linear-gradient()
Candidate Recommendation Initial definition.

Browser compatibility

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (on background and background-image) 3.6 (1.9.2)-moz[3]
16 (16)[5]
10.0 (534.16)-webkit [2][3] 10.0 [1] 11.10-o [3] 5.1-webkit[2][3]
On border-radius 29 (29) (Yes) (Yes) (Yes) (Yes)
On any other property that accept <image> 未实现 (Yes) (Yes) (Yes) (Yes)
Legacy webkit syntax 未实现 3-webkit [2] 未实现 未实现 4.0-webkit[2]
Legacy from syntax (without to) 3.6 (1.9.2)-moz[4]
Removed in 16 (16)[7]
10.0 (534.16)-webkit [2] 10.0 11.10-o[4] 5.1-webkit[2]
to syntax 10 (10)-moz[4]
16 (16)
26.0 10.0 11.60-o[4]
Presto 2.12 will remove the prefix.
未实现
Interpolation hints/gradient midpoints (a percent without a color) 36 (36) 40 ? 27 (Yes)[6]
Unitless 0 for <angle> 46 (46)-webkit[8]
未实现[9]
(Yes) Edge 12 (Yes) (Yes)
Feature Firefox (Gecko) Chrome Internet Explorer Opera (Presto) Safari
Basic support 1.0 (1.9.2)-moz[3]
16.0 (16)[5]

16-webkit
26

10 (Yes) (Yes)[6]

[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

[3] Gecko, Opera & Webkit considers <angle> to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top. Since Firefox 42, the prefixed version of gradients can be disabled by setting layout.css.prefixes.gradients to false.

[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

-moz-repeating-linear-gradient(to top left, blue, red);

is the same as:

-moz-repeating-linear-gradient(bottom right, blue, red);

The legacy syntax, without to, is planned to go away when the prefix is removed.

[5] Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.

[6] WebKit bug 1074056.

[7] In addition to the unprefixed support using the standard syntax, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the function using the legacy 'from' syntax for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[8] In -webkit-linear-gradient function (handled below), Gecko accept unitless 0 for angles, to match webkit/blink,See bug 1239153.

[9] See bug 1363292.

See also

文档标签和贡献者

 此页面的贡献者: zway, zhuangyin, Sebastianz, prayash, littleXiaosi
 最后编辑者: zway,