纯CSS实现多种背景图案：渐变条纹、蓝图网格、波点与棋盘效果全解析（附 Sass Mixin 封装）
🎨 本文将带你深入了解 CSS 渐变（Gradients） 的妙用，从线性渐变、径向渐变到多层叠加，实现各种“条纹、网格、波点、棋盘”等效果。
💡 无需图片，纯 CSS 即可实现高性能可缩放背景！
🧩 一、线性渐变打造条纹背景
CSS 的 linear-gradient() 函数不仅可以实现平滑的颜色过渡，还能通过透明与不透明的分界，制造出规律的条纹效果。
#div1 {width: 300px;height: 200px;background: white;background-image: linear-gradient(90deg,rgba(200, 0, 0, .5) 50%, transparent 0),linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);background-size: 30px 30px;
}
📌 效果说明：
-
使用两个线性渐变（横 + 纵）叠加。
-
rgba(200, 0, 0, .5)表示半透明红色。 -
background-size: 30px 30px;控制条纹的间距。
🖼️ 效果图：
📘 二、固定线宽的蓝图网格
有时候我们希望网格的线条宽度保持固定（1px），无论格子的大小如何变化。
#div2 {width: 300px;height: 200px;background: #58a;background-image: linear-gradient(white 1px, transparent 0),linear-gradient(90deg, white 1px, transparent 0);background-size: 30px 30px;
}
📎 核心技巧：
-
使用
white 1px控制线宽。 -
横向 + 纵向叠加出网格效果。
🖼️ 效果图：
🧭 三、逼真的蓝图网格（叠加多层渐变）
通过叠加不同粗细与透明度的网格线，可以模拟更真实的“制图蓝图”效果。
#div3 {width: 300px;height: 200px;background: #58a;background-image:linear-gradient(white 2px, transparent 0),linear-gradient(90deg, white 2px, transparent 0),linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
}
🎯 技巧解析：
-
叠加四层渐变（两粗两细）。
-
使用
hsla()透明白线形成细网格层次。
🖼️ 效果图：
☀️ 四、径向渐变实现圆点阵列
径向渐变（radial-gradient()）非常适合创建圆形或椭圆形图案。
#div4 {width: 300px;height: 200px;background: #655;background-image: radial-gradient(tan 30%, transparent 0);background-size: 30px 30px;
}
🟤 原理：
-
tan 30%生成浅棕色圆点。 -
透明部分露出底色形成规则点阵。
🖼️ 效果图：
💫 五、波点图案（双层径向渐变）
通过两层偏移叠加的径向渐变，即可实现经典的波点布纹理。
#div5 {width: 300px;height: 200px;background: #655;background-image:radial-gradient(tan 30%, transparent 0),radial-gradient(tan 30%, transparent 0);background-size: 30px 30px;background-position: 0 0, 15px 15px;
}
🌟 重点：
-
第二层偏移
15px 15px，即半格距离。 -
模拟现实中交错排列的波点。
🖼️ 效果图：
♟️ 六、棋盘格图案（方形渐变）
最后，我们使用两层 linear-gradient() 倾斜叠加，轻松绘制出棋盘背景。
#div6 {width: 300px;height: 200px;background: #eee;background-image: linear-gradient(45deg,rgba(0, 0, 0, .25) 25%, transparent 0,transparent 75%, rgba(0, 0, 0, .25) 0),linear-gradient(45deg,rgba(0, 0, 0, .25) 25%, transparent 0,transparent 75%, rgba(0, 0, 0, .25) 0);background-position: 0 0, 15px 15px;background-size: 30px 30px;
}
🎮 核心技巧：
-
两个 45° 角度的渐变交错叠加。
-
偏移半个格子形成交替效果。
🖼️ 效果图：
⚙️ 七、Sass 预处理器封装（Mixin 优化）
如果你在项目中频繁使用这些图案，可以将它们封装为 Sass Mixins，让调用更简洁优雅。
✅ 波点背景 Mixin
@mixin polka($size, $dot, $base, $accent) {background: $base;background-image:radial-gradient($accent $dot, transparent 0),radial-gradient($accent $dot, transparent 0);background-size: $size $size;background-position: 0 0, $size/2 $size/2;
}// 调用示例
@include polka(30px, 30%, #655, tan);🎨 说明：
-
$size：波点间距 -
$dot：波点占比（百分比） -
$base：底色 -
$accent：波点颜色
✅ 棋盘背景 Mixin
@mixin checkerboard($size, $base, $accent: rgba(0, 0, 0, .25)) {background: $base;background-image:linear-gradient(45deg,$accent 25%, transparent 0,transparent 75%, $accent 0),linear-gradient(45deg,$accent 25%, transparent 0,transparent 75%, $accent 0);background-position: 0 0, $size $size;background-size: 2*$size 2*$size;
}// 调用示例
@include checkerboard(15px, #58a, tan);💡 优点：
-
调用简单，可快速调整格子大小与颜色。
-
生成的背景完全无图、轻量级、响应式。
🧠 八、总结与扩展
| 类型 | 使用函数 | 特点 | 应用场景 |
|---|---|---|---|
| 条纹 | linear-gradient() | 简单高效 | 表格背景、条纹进度条 |
| 网格 | 多层线性渐变 | 模拟图纸线条 | 编辑器背景、制图页面 |
| 波点 | 双层径向渐变 | 圆点交错排列 | 布纹、装饰背景 |
| 棋盘 | 45° 双渐变 | 方格交替 | 游戏、示例背景 |
📦 九、完整源码下载
你可以直接复制以下完整 HTML 代码运行：
<!DOCTYPE html>
<!--CSS渐变，“条纹背景”-->
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><style>#div1 {width: 300px;height: 200px;background: white;background-image: linear-gradient(90deg,rgba(200, 0, 0, .5) 50%, transparent 0),linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);background-size: 30px 30px;}#div2 {width: 300px;height: 200px;background: #58a;/*回退颜色的作用*/background-image: linear-gradient(white 1px, transparent 0),linear-gradient(90deg, white 1px, transparent 0);background-size: 30px 30px;/*我们得到的结果就是一幅用1px白线画出来的30px大小的网格图案*/}#div3 {width: 300px;height: 200px;background: #58a;/*回退颜色的作用*/background-image:linear-gradient(white 2px, transparent 0),linear-gradient(90deg, white 2px, transparent 0),linear-gradient(hsla(0, 0%, 100%, .3) 1px,transparent 0),linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px,transparent 0);background-size: 75px 75px, 75px 75px,15px 15px, 15px 15px;/*我们得到的结果就是一幅用1px白线画出来的30px大小的网格图案*/}#div4 {width: 300px;height: 200px;background: #655;background-image: radial-gradient(tan 30%, transparent 0);background-size: 30px 30px;}#div5 {width: 300px;height: 200px;background: #655;background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);background-size: 30px 30px;background-position: 0 0, 15px 15px;/*为了达到波点的效果，第二层背景的偏移定位值必须是贴片宽高的一半。*/}#div6 {width: 300px;height: 200px;background: #eee;background-image: linear-gradient(45deg,rgba(0, 0, 0, .25) 25%, transparent 0,transparent 75%, rgba(0, 0, 0, .25) 0),linear-gradient(45deg,rgba(0, 0, 0, .25) 25%, transparent 0,transparent 75%, rgba(0, 0, 0, .25) 0);background-position: 0 0, 15px 15px;background-size: 30px 30px;}</style></head><body><p>图一：网格</p><!--只使用一个渐变时，我们能创建的图案并不多。当我们把多个渐变图案组合起来，让他们透过彼此
的透明区域显现时，就能得到各种样式的网格--><div id="div1"></div><p>图二：简单的蓝图网格图案--不管每个格子有多大，它的线条始终是1px</p><!--在某些情况下我们希望网格中每个格子的大小可以调整，而网格线条的粗细同时保持固定，举例来说，类似图纸辅助线的网格就是这种情况。这是非常好的一个例子，展示了使用长度而不是
百分比作为色标的场景--><div id="div2"></div><p>图三：更加逼真的蓝图网格</p><!--把两幅不同线宽、不同颜色的网格图案叠加起来，得到一个更加逼真的蓝图网格--><div id="div3"></div><p style="position: absolute;top: 5px;left: 550px;">图四：圆点阵列</p><!--径向渐变同样也是非常实用的，因为它允许我们创建圆形，椭圆，或是它们的一部分。径向渐变能够创建的最简单的图案是圆点的阵列--><div style="position: absolute;top: 55px;left: 500px;" id="div4"></div><p style="position: absolute;top: 265px;left: 550px;">图五：波点</p><!--生成两层圆点阵列图案，并把它们的背景定位错开，这样就可以得到真正的波点图案--><div style="position: absolute;top: 315px;left: 500px;" id="div5"></div><p style="position: absolute;top: 525px;left: 550px;">图六：棋盘</p><!--生成两层圆点阵列图案，并把它们的背景定位错开，这样就可以得到真正的波点图案--><div style="position: absolute;top: 575px;left: 500px;" id="div6"></div></body></html>🔗 十、延伸阅读
-
MDN：CSS linear-gradient() 文档
-
MDN：CSS radial-gradient() 文档
-
CSS Tricks：Patterns with CSS Gradients
🏁 结语：
利用 CSS 渐变 + Sass Mixin，你可以轻松构建丰富的背景纹理，不依赖任何图片资源。
让网页既轻量又优雅，这正是“纯 CSS 艺术”的魅力所在 💫