repeating-linear-gradient()通过定义重复单元实现无限平铺的渐变效果，如条纹、虚线、点阵等；结合多层渐变、动画、背景固定和css变量可创造复杂动态背景，提升视觉表现与可维护性。
repeating-linear-gradient()
是CSS中一个非常强大的函数，它能让你定义一个线性渐变模式，然后这个模式会沿着指定方向无限重复，从而在不增加图片资源的情况下，为网页元素创造出各种独特的、富有节奏感的背景效果。它本质上就是把一个基础的线性渐变“平铺”开来，让你可以用纯CSS实现原本需要图片才能完成的复杂背景设计。
解决方案
要使用
repeating-linear-gradient()
，核心在于理解它如何定义一个“重复单元”。它的语法和
linear-gradient()
非常相似，但关键在于你设置的颜色停止点（color stops）会决定这个重复单元的长度。
一个基础的
repeating-linear-gradient()
看起来是这样的：
background: repeating-linear-gradient(direction, color1 stop1, color2 stop2, ...);
这里的
direction
可以是角度（如
45deg
）或关键字（如
to right
）。而
color1 stop1, color2 stop2
等则是定义了渐变的颜色和它们在渐变线上的位置。
关键在于重复机制：
repeating-linear-gradient()
会取你定义的最后一个色标（或如果未明确定义，则为最后一个颜色在100%位置）到第一个色标（或0%位置）之间的渐变段，然后无限次地重复这个段。为了创建清晰的重复图案，比如条纹，你通常需要让颜色在某个点“突然”切换，而不是平滑过渡。
立即学习“前端免费学习笔记（深入）”；
举个例子，创建一个简单的红蓝条纹：
.striped-background { background: repeating-linear-gradient( 45deg, /* 渐变方向为45度 */ #ff6b6b, /* 红色开始 */ #ff6b6b 10px, /* 红色持续到10px */ #4ecdc4, /* 蓝色从10px开始 */ #4ecdc4 20px /* 蓝色持续到20px */ ); width: 100%; height: 200px; }
在这个例子中，
#ff6b6b 10px
和
#4ecdc4 10px
意味着在10px这个位置，颜色从红色瞬间切换到蓝色。然后
#4ecdc4 20px
定义了蓝色持续到20px。所以，一个完整的重复单元是20px，其中前10px是红色，后10px是蓝色。整个渐变会以45度角，每20px重复一次红蓝相间的条纹。我个人觉得，它最妙的地方就在于，你只需要定义好一个“单元格”，它就能帮你自动铺满，省去了很多图片切图的麻烦，而且是纯CSS，缩放起来也毫无压力。
使用
repeating-linear-gradient()
repeating-linear-gradient()
能做出哪些让人眼前一亮的背景效果？
repeating-linear-gradient()
的魅力在于它的灵活性，能让你用最少的代码实现各种视觉效果。
1. 经典的条纹背景： 这是最基础也是最常用的场景。无论是水平、垂直还是斜向条纹，都能轻松实现。通过调整角度和色标长度，你可以控制条纹的粗细和方向。
/* 垂直条纹 */ .vertical-stripes { background: repeating-linear-gradient(to right, #f0f0f0, #f0f0f0 15px, #e0e0e0 15px, #e0e0e0 30px); height: 150px; } /* 细斜纹 */ .thin-diagonal-stripes { background: repeating-linear-gradient(135deg, #eee, #eee 3px, #ccc 3px, #ccc 6px); height: 150px; }
2. 虚线或点状图案： 通过巧妙地结合透明色，你可以模拟出虚线、点阵甚至网格效果。这种方法比用图片做虚线更灵活，因为你可以随时调整虚线的间距和颜色。
/* 水平虚线 */ .dashed-line { background: repeating-linear-gradient(to right, transparent, transparent 10px, #aaa 10px, #aaa 12px); height: 50px; } /* 简单的点阵（需要多层渐变） */ .dot-pattern { background-color: #f8f8f8; background-image: repeating-linear-gradient(0deg, #ccc, #ccc 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, #ccc, #ccc 1px, transparent 1px, transparent 20px); background-size: 20px 20px; /* 控制点阵的密度 */ height: 200px; }
你看，通过两层渐变，我们就能在视觉上模拟出网格，是不是挺有意思的？
3. 几何图案和纹理： 这需要一点创意和对色标的精确控制。比如，可以创造出锯齿状、波浪线，甚至是某种编织纹理。
/* 锯齿边框效果 */ .sawtooth-edge { background: repeating-linear-gradient(-45deg, #fff, #fff 5px, #000 5px, #000 10px); height: 30px; width: 100%; }
有时候，你会发现一些意想不到的颜色和角度组合能带来惊喜，这完全取决于你的想象力。
在使用
repeating-linear-gradient()
repeating-linear-gradient()
时，有哪些值得注意的技巧和常见误区？
虽然
repeating-linear-gradient()
功能强大，但在实际应用中，也有一些小细节和坑需要注意。
1. 色标的精确控制是关键，避免模糊重复：
repeating-linear-gradient()
的“重复”机制，很大程度上取决于你如何设置色标。一个常见的误区是像
linear-gradient()
一样只设置起点和终点颜色，而不明确定义重复单元的长度，例如
background: repeating-linear-gradient(red, blue);
。这样会导致一个从红到蓝的平滑渐变不断重复，通常不是你想要的效果。 技巧： 始终明确定义每个颜色在重复单元中的起止位置。例如，
red 0px, red 10px, blue 10px, blue 20px
清晰地定义了一个20px的重复单元，其中前10px是红色，后10px是蓝色，颜色在10px处瞬间切换。
2. 透明度的妙用，创造层次感： 结合
rgba()
或
hsla()
的透明度，可以创建出叠加、镂空或半透明的效果，让背景更有层次感。比如，制作一个半透明的网格叠加在图片上，或者制作一个渐变虚线。
.transparent-overlay { background: repeating-linear-gradient( 45deg, rgba(0,0,0,0.1) 0, rgba(0,0,0,0.1) 5px, transparent 5px, transparent 10px ); background-color: lightblue; /* 作为底层颜色 */ height: 150px; }
这种方式能让你的设计看起来更精致，不那么“死板”。
3. 与
background-size
结合，控制重复单元的实际大小： 虽然
repeating-linear-gradient()
本身会重复，但如果你想控制重复单元的实际大小，或者想让它在特定区域内重复，
background-size
属性就派上用场了。当你定义了一个小型的重复图案，但希望它在更大的区域内以特定尺寸平铺时，
background-size
能给你更精细的控制。
.custom-sized-pattern { background: repeating-linear-gradient(45deg, #f0f, #f0f 5px, #0ff 5px, #0ff 10px); background-size: 40px 40px; /* 将20px的重复单元放大到40px */ height: 200px; }
4. 性能考量： 纯CSS渐变通常比图片性能好，但在非常复杂的重复渐变中，浏览器渲染也需要计算。过度复杂的渐变层可能会影响性能，尤其是在旧设备上。我遇到过一些同事，为了追求极致的视觉效果，叠加了七八层渐变，结果在手机上就有点卡顿。所以，适度很重要，在追求美观的同时，也要兼顾用户体验。
除了基础用法，如何将
repeating-linear-gradient()
repeating-linear-gradient()
与其他CSS特性巧妙结合，创造更高级的视觉效果？
repeating-linear-gradient()
本身已经很强大了，但当它与其他css属性“联姻”时，能迸发出更多令人惊叹的火花。
1. 多层渐变叠加，创造复杂图案： 这是最常见的进阶用法。通过在
background
属性中定义多个
repeating-linear-gradient()
，并用逗号分隔，你可以创建出极其复杂的图案。每一层渐变都可以有自己的角度、颜色、重复单元和背景位置。
.complex-pattern { background: repeating-linear-gradient(45deg, #f00 0, #f00 5px, transparent 5px, transparent 10px), /* 第一层：红色斜线 */ repeating-linear-gradient(-45deg, #00f 0, #00f 5px, transparent 5px, transparent 10px), /* 第二层：蓝色斜线 */ #eee; /* 底色 */ background-size: 20px 20px; /* 控制所有渐变的重复单元大小 */ height: 200px; }
这种方式，我经常用来模拟一些材质纹理，比如布料的编织感，或者某种金属拉丝的效果。通过调整不同层渐变的透明度，还能做出更微妙的叠加效果。
2. 与
background-attachment: fixed
结合，实现视差背景： 当你的
repeating-linear-gradient()
作为背景，并且设置
background-attachment: fixed;
时，这个重复渐变会固定在视口中，而内容则在其上方滚动。这可以产生一种简单的视差效果，增加页面的深度感。
body { background: repeating-linear-gradient(45deg, #f9f9f9, #f9f9f9 10px, #e9e9e9 10px, #e9e9e9 20px); background-attachment: fixed; /* 背景固定 */ /* 其他内容和高度以触发滚动 */ min-height: 150vh; }
3. 结合动画（
@keyframes
）和过渡（
），让背景动起来： 虽然渐变本身是静态的，但你可以通过动画或过渡改变其
background-position
、
background-size
甚至渐变的颜色值，让重复渐变动起来，增加页面的交互性和趣味性。
@keyframes move-stripes { from { background-position: 0 0; } to { background-position: 200px 0; } /* 沿着X轴移动200px */ } .animated-stripes { background: repeating-linear-gradient(90deg, #ffcc00, #ffcc00 20px, #ff6600 20px, #ff6600 40px); background-size: 40px 40px; /* 定义重复单元的大小 */ animation: move-stripes 5s linear infinite; /* 5秒线性无限循环动画 */ height: 100px; }
这种动态效果，尤其是在加载动画或者某些交互反馈上，能带来非常棒的用户体验，让页面看起来更有活力。
4. 利用自定义属性（CSS Variables）增强可维护性和灵活性： 将重复渐变中的颜色、大小、角度等参数定义为CSS变量，可以更方便地管理和修改，尤其是在需要主题切换或响应式调整时，非常灵活。
:root { --stripe-color-a: #a0c4ff; --stripe-color-b: #bdb2ff; --stripe-width: 15px; --stripe-angle: 60deg; } .themable-stripes { background: repeating-linear-gradient( var(--stripe-angle), var(--stripe-color-a), var(--stripe-color-a) var(--stripe-width), var(--stripe-color-b), var(--stripe-color-b) calc(var(--stripe-width) * 2) ); height: 150px; } /* 切换主题时，只需修改变量 */ @media (prefers-color-scheme: dark) { :root { --stripe-color-a: #3a0ca3; --stripe-color-b: #4361ee; } }
这对于维护大型项目或者需要快速迭代设计稿的场景来说，简直是神器，大大提高了开发效率和代码的可读性。
评论（已关闭）
评论已关闭