repeating-linear-gradient

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);

 

每次重复时,色标位置的偏移量都是基准渐变长度(最后一个色标和第一个之间的距离)的倍数。因此,最后色标的色值应该与第一个色标的色值保持一致;如果不一致的话,会导致非常突兀的渐变效果。

与其他渐变一样,线形重复渐变没有提供 固定的尺寸;即, 它没有原始尺寸或首选尺寸,也没有首选的比列。它将自适应于对应元素的尺寸。

提示: 因为 <gradient> 属于<image> 数据类型,所以只能在可以使用 <image>的地方使用它们。因此repeating-linear-gradient() 不适用于background-color以及使用 <color> 数据类型的地方。

语法

<side-or-corner>
描述渐变线的起始点位置。它包含两个关键词:第一个指出垂直位置left or right,第二个指出水平位置top or bottom。关键词的先后顺序无影响,且都是可选的。

to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
<angle>
用角度值指定渐变的方向(或角度)。角度顺时针增加。 
<color-stop>
由一个<color>值组成,并且跟随着一个可选的终点位置(可以是一个<percentage>或者是沿着渐变轴的<length>)。CSS渐变的颜色渲染采取了与SVG相同的规则。

提示:渲染颜色中间点的规则CSS渐变中的色标 与SVG渐变一致.

形式语法

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
                            \---------------------------------/ \----------------------------/
                              渐变轴的定义                                色标列表

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

示例

#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>

规格

规格 状态 备注
CSS Images Module Level 3
repeating-linear-gradient()
Candidate Recommendation Initial definition.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)
Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (on background and background-image) 3.6 (1.9.2)-moz (en-US)[3]
16 (16)[5]
10.0 (534.16)-webkit (en-US) [2][3] 10.0 [1] 11.10-o (en-US) [3] 5.1-webkit (en-US)[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 This API has not been standardized. 未实现 3-webkit (en-US) [2] 未实现 未实现 4.0-webkit (en-US)[2]
Legacy from syntax (without to) This API has not been standardized. 3.6 (1.9.2)-moz (en-US)[4]
Removed in 16 (16)[7]
10.0 (534.16)-webkit (en-US) [2] 10.0 11.10-o (en-US)[4] 5.1-webkit (en-US)[2]
to syntax 10 (10)-moz (en-US)[4]
16 (16)
26.0 10.0 11.60-o (en-US)[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 (en-US)[8]
未实现[9]
(Yes) Edge 12 (Yes) (Yes)
Feature Firefox (Gecko) Chrome Internet Explorer Opera (Presto) Safari
Basic support 1.0 (1.9.2)-moz (en-US)[3]
16.0 (16)[5]

16-webkit (en-US)
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.

了解更多