什么是 CSS 背景图案？

CSS 背景图案是利用 CSS 的 background-image 属性（特别是 linear-gradient 和 radial-gradient ）通过数学计算生成的重复图形。这种图案不依赖外部图片文件，完全由浏览器代码渲染。

为什么使用 CSS 生成图案而非图片？

在现代 Web 开发中，使用 CSS 生成纹理图案具有显著优势：

• 极小的代码体积： 复杂的图形可能只需要几百字节的代码，而同等清晰度的图片可能需要几十 KB。
• 无限的分辨率： 由于是矢量渲染，图案在 4K 屏幕或 Retina 显示器上永远保持锐利，不会出现模糊。
• 高度可定制： 您可以随时通过代码修改颜色、间距和透明度，而无需重新导出图片。
• 支持动画： 可以利用 transition 或 animation 让图案产生流动、旋转或变色效果。

常见图案类型与应用场景

• 条纹 (Stripes)： 极简主义设计的首选，常用于侧边栏、卡片顶部装饰或区分不同的内容块。
• 圆点 (Dots/Polka)： 营造活泼、现代或复古的氛围，非常适合个人博客、活动海报背景。
• 网格 (Grid)： 科技感和秩序感的象征，常用于管理后台、数据展示面板或设计类网站。
• 几何形状 (Geometric)： 如三角形、波浪纹等，能为着陆页 (Landing Page) 增加独特的艺术感。

如何优化背景图案的性能？

虽然 CSS 图案很轻量，但过细、过密的复杂图案在老旧设备上可能会增加 GPU 渲染压力。建议：

1. 避免在大型容器上使用像素级（如 1px 或 2px）的极其复杂的重复纹理。
2. 尽量使用 background-size 配合相对简单的渐变组合。
3. 在设置背景图案时，务必提供一个接近主色调的 background-color ，以防代码加载失败时出现白屏。