📅 发布时间：2026/6/18 13:09:17

纯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 代码运行：

图一：网格
图二：简单的蓝图网格图案--不管每个格子有多大，它的线条始终是1px
图三：更加逼真的蓝图网格
图四：圆点阵列
图五：波点
图六：棋盘

十、延伸阅读

MDN：CSS linear-gradient() 文档
MDN：CSS radial-gradient() 文档
CSS Tricks：Patterns with CSS Gradients
结语：
利用 CSS 渐变 + Sass Mixin，你可以轻松构建丰富的背景纹理，不依赖任何图片资源。
让网页既轻量又优雅，这正是“纯 CSS 艺术”的魅力所在