CSS - repeating-linear-gradient()

在 CSS 中，函数 **repeating-linear-gradient()** 用于创建由重复线性渐变组成的图像。此函数类似于 **linear-gradient()**，因为它采用相同的参数，颜色停止点会在所有方向无限重复以填充容器。生成的图像是 **<gradient>** 数据类型的特殊图像。

概述

第一个和最后一个颜色停止点之间的距离决定了重复渐变的长度。
当第一个颜色停止点没有指定颜色停止长度时，它默认为 0。
颜色停止点的位置会随着每次重复而按基本线性渐变长度的倍数进行偏移。
如果颜色停止值不同，当结束颜色停止点的位置与起始颜色停止点的位置重合时，可以在颜色停止点之间看到清晰的视觉过渡。
repeating-linear-gradient 没有内在尺寸，这意味着图像没有首选大小或纵横比。
图像的大小将与其应用到的元素的大小匹配。
**<gradient>** 数据类型只能在使用 **<image>** 的地方使用。
**repeating-linear-gradient()** 函数不能与 **<color>** 数据类型和 background-color 等属性一起使用。

可能的值

函数 **repeating-linear-gradient()** 可以以下列值作为参数

1. **<side-or-corner>**

确定渐变的起点。
包含单词 **to** 和最多两个关键词，一个表示水平方向（left 或 right），另一个表示垂直方向（top 或 bottom）。
侧边关键词的顺序可以是任何顺序。
如果未指定值，则默认值为 **to bottom**。
**to top、to bottom、to left** 和 **to right** 的等效值为 **0deg、180deg、270deg** 和 **90deg**。
**<angle>** 值沿顺时针方向递增。

2. **<linear-color-stop>**: 由颜色停止点的 **<color>** 值以及一个或两个可选的停止位置值组成。停止位置值可以是 **<percentage>** 或 **<length>** 值。0% 或 0 值表示渐变的起点；而 100% 值表示渐变不再重复时图像尺寸的 100%。

3. **<color-hint>**: 确定相邻颜色停止点之间的渐变进度。如果未指定值，则颜色过渡的中点是两个颜色停止点之间的中点。

语法

repeating-linear-gradient(
    angle | to side-or-corner, color-stop1, color-stop2,...);

CSS repeating-linear-gradient() - 角度值

倾斜 60 度，具有三个颜色停止点的重复渐变示例

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }
   /* A repeating gradient tilted 60 degrees,
   with three color stops */
   .repeat-linear {
      background-image: repeating-linear-gradient(60deg, red, yellow 7%, black 10%);
   }
</style>
</head>
<body>
   <h1>Repeating linear gradient</h1>
   <div class="repeat-linear"></div>
</body>
</html>

CSS repeating-linear-gradient() - 从右下到左上

从右下到左上的重复渐变示例。

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }
   /* A repeating gradient going from the bottom right to the top left */
   .repeat-linear {
      background-image: repeating-linear-gradient(to left top, red, yellow 20px, black 20%);
   }
</style>
</head>
<body>
   <h1>Repeating linear gradient</h1>
   <div class="repeat-linear"></div>
</body>
</html>

CSS repeating-linear-gradient() - 不重复

线性渐变示例，其中渐变不重复，因为最后一个颜色停止点默认为 100%

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }
   /* A gradient going from the bottom to top,
   starting red, turning yellow after 40%,
   and finishing green. This gradient doesn't repeat because
   the last color stop defaults to 100% */
   .repeat-linear {
      background-image: repeating-linear-gradient(0deg, red, yellow 40%, green);
   }
</style>
</head>
<body>
   <div class="repeat-linear"></div>
</body>
</html>

打印页面