repeating-linear-gradient()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS 函数 repeating-linear-gradient()
创建一个由重复线性渐变组成的 <image>
,类似于 linear-gradient
,并且采用相同的参数,但是它会在所有方向上重复渐变以覆盖其整个容器。这个函数的结果是 <gradient>
数据类型的对象,此对象是一种特殊的 <image>
类型。
尝试一下
重复渐变的长度是第一个色标和最后一个色标之间的距离。如果第一种颜色没有色标长度,则色标长度默认为 0。每次重复时,色标的位置都会以基本线性渐变长度的倍数移动。因此,每个结束色标的位置都会与起始色标的位置重合;如果色值不同,就会产生鲜明的视觉过渡。可以通过重复第一种颜色值作为最后一种颜色值来改变这种情况。
与其他渐变一样,线性重复渐变没有内在尺寸,也就是说,它没有固有或首选的尺寸,也没有首选的比例,其实际大小取决于所应用的元素的大小。
由于 <gradient>
属于 <image>
数据类型,因此只能用在可以使用 <image>
的地方。因此,repeating-linear-gradient()
在background-color
以及其他使用 <color>
数据类型上不起作用。
语法
/* 一个倾斜 45 度的重复线性渐变,
从蓝色开始渐变到红色 */
repeating-linear-gradient(45deg, blue, red);
/* 一个从右下角到左上角的重复线性渐变,
从蓝色开始渐变到红色 */
repeating-linear-gradient(to left top, blue, red);
/* 一个由下至上的重复线性渐变,
从蓝色开始,40% 后变绿,
最后渐变到红色 */
repeating-linear-gradient(0deg, blue, green 40%, red);
/* 从左到右重复五次的渐变,从红色开始,然后变绿,再变回红色 */
repeating-linear-gradient(to right, red 0%, green 10%, red 20%);
值
<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
,增加值相当于顺时针旋转。 <linear-color-stop>
-
色标(color stop)的
<color>
值,然后是一个或两个可选的色标位置(沿渐变轴的<percentage>
或<length>
)。百分比值0%
,或者长度值0
,代表渐变的开始,100%
代表 100% 的图像尺寸,也就是说渐变不会重复。 <color-hint>
-
颜色提示(color-hint)是一种插值提示,定义了渐变色在相邻色标之间的渐变方式。长度定义了渐变色应在两个色标之间的哪个点到达颜色过渡的中点。如果省略此值,颜色过渡的中点就是两个色标之间的中点。
备注: 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>
示例
斑马条纹
body {
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 20px,
black 20px,
black 40px
);
/* 包括多个色标长度 */
background-image: repeating-linear-gradient(
-45deg,
transparent 0 20px,
black 20px 40px
);
}
十个重复的水平线
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 渐变。
规范
Specification |
---|
CSS Images Module Level 3 # repeating-gradients |
浏览器兼容性
BCD tables only load in the browser