CSS 函数 - repeating-linear-gradient（）

在 CSS 中，函数 repeating-linear-gradient（） 在创建由重复线性梯度组成的图像时很有用。该函数类似于 linear-gradient（），因为它采用相同的参数，其中颜色停止在所有方向上无限重复，以填充容器。生成的图像是 <gradient> 数据类型的特殊图像。

概述

第一个和最后一个色标之间的距离决定了渐变的长度，即重复。
当第一个色标未指定色标长度时，它默认为 0。
每重复一次，色标的位置都会按基本线性渐变长度的倍数移动。
如果色标值不同，则在色标之间可以看到明显的视觉过渡，因为结束色标的位置与起始色标的位置重合。
重复线性渐变没有固有尺寸，这意味着图像没有首选的大小或纵横比。
图像的大小将与它适用的元素的大小匹配。
<gradient>数据类型只能在使用 <image> 的地方使用。
repeating-linear-gradient（） 函数不能与 <color>数据类型和 background-color 等属性一起使用。

可能的值

函数 repeating-linear-gradient（） 可以将以下值作为参数：

1. <side-or-corner>:

确定梯度的起点。
包含单词 to 和最多两个关键术语，即一个表示水平侧（左侧或右侧），另一个表示垂直侧（顶部或底部）。
侧键术语的顺序可以是任何内容。
如果未指定任何值，则设置的默认值为 bottom。
顶部、底部、左侧和右侧的等效值分别为 0 度、180 度、270 度和 90 度。
<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>

打印本页