repeating-linear-gradient()

repeating-linear-gradient() CSS 函数 创建一个由重复线性渐变组成的图像。它类似于 linear-gradient()，并接受相同的参数，但它无限地向所有方向重复颜色停止，从而覆盖其整个容器。该函数的结果是 <gradient> 数据类型的对象，这是一种特殊的 <image>。

试试看

重复渐变的长度是第一个和最后一个颜色停止之间的距离。如果第一个颜色没有颜色停止长度，则颜色停止长度默认为 0。随着每次重复，颜色停止的位置会按基本线性渐变长度的倍数进行偏移。因此，每个结束颜色停止的位置都与开始颜色停止的位置重合；如果颜色值不同，这将导致明显的视觉过渡。这可以通过将第一个颜色再次作为最后一个颜色来进行更改。

与任何渐变一样，重复线性渐变没有 内在尺寸；即，它没有自然或首选大小，也没有首选比例。它的具体大小将与它所应用的元素的大小匹配。

因为 <gradient> 属于 <image> 数据类型，所以它们只能在可以使用 <image> 的地方使用。因此，repeating-linear-gradient() 不会在 background-color 和其他使用 <color> 数据类型的属性上工作。

语法

css
/* 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%)

/* Interpolation in rectangular color space */
repeating-linear-gradient(in oklab, blue, red 50px)

/* Interpolation in polar color space */
repeating-linear-gradient(in hsl, blue, red 50px)

/* Interpolation in polar color space
  with longer hue interpolation method */
repeating-linear-gradient(in hsl longer hue, blue, red 50px)

Values

<side-or-corner>

渐变线的起点位置。如果指定，它将包含单词 to 和最多两个关键字：一个表示水平方向（left 或 right），另一个表示垂直方向（top 或 bottom）。侧边关键字的顺序无关紧要。如果未指定，则默认为 to bottom。

值 to top、to bottom、to left 和 to right 分别等效于角度 0deg、180deg、270deg 和 90deg。其他值将转换为角度。

<angle>

渐变线的角度方向。值 0deg 等效于 to top；增加的值从此处顺时针旋转。

<线性颜色停止>

颜色停止的 <color> 值，后跟一个或两个可选的停止位置（每个位置都是 <percentage> 或 <length>，位于渐变轴线上）。百分比 0% 或长度 0 表示渐变的起点；值 100% 是图像大小的 100%，这意味着渐变不会重复。

<颜色提示>

颜色提示是一个插值提示，用于定义渐变在相邻颜色停止之间如何进行。长度定义了在两个颜色停止之间渐变颜色应该达到颜色过渡中点的点。如果省略，颜色过渡的中点就是两个颜色停止之间的中点。

注意： CSS 渐变中的颜色停止 的渲染遵循与 SVG 渐变 中的颜色停止相同的规则。

正式语法

<repeating-linear-gradient()> = 
  repeating-linear-gradient( [ <linear-gradient-syntax> ] )  

<linear-gradient-syntax> = 
  [ <angle> | to <side-or-corner> ]? , <color-stop-list>  

<side-or-corner> = 
  [ left | right ]  ||
  [ top | bottom ]  

<color-stop-list> = 
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?  

<linear-color-stop> = 
  <color> <length-percentage>?  

<linear-color-hint> = 
  <length-percentage>  

<length-percentage> = 
  <length>      |
  <percentage>

示例

斑马条纹

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

十个重复的水平条

css
body {
  background-image: repeating-linear-gradient(
    to bottom,
    rgb(26 198 204),
    rgb(26 198 204) 7%,
    rgb(100 100 100) 10%
  );
}

由于最后一个颜色停止为 10%，并且渐变为垂直方向，因此重复渐变中的每个渐变都占高度的 10%，共计 10 个水平条。

矩形颜色空间中的插值

css
body {
  background: repeating-linear-gradient(90deg in oklab, blue, red 100px);
}

使用色调插值

在本插值示例中，使用了 hsl 颜色系统，并对 色调 进行插值。

css
.shorter {
  background: repeating-linear-gradient(
    90deg in hsl shorter hue,
    red,
    blue 300px
  );
}

.longer {
  background: repeating-linear-gradient(
    90deg in hsl longer hue,
    red,
    blue 300px
  );
}

顶部的框使用 较短的插值，这意味着颜色从红色到蓝色，使用的是 色轮 上较短的弧线。底部的框使用 较长的插值，这意味着颜色从红色到蓝色，使用的是较长的弧线，穿过绿色、黄色和橙色。

注意： 请参阅 使用 CSS 渐变，以获取更多示例。

规范

规范
CSS 图像模块级别 3
# 重复渐变

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅