纯CSS实现多种背景图案：渐变条纹、蓝图网格、波点与棋盘效果全解析（附 Sass Mixin 封装）

小九今天不码代码2025-10-22 13:16

🎨 本文将带你深入了解 CSS 渐变（Gradients） 的妙用，从线性渐变、径向渐变到多层叠加，实现各种"条纹、网格、波点、棋盘"等效果。

💡 无需图片，纯 CSS 即可实现高性能可缩放背景！

🧩 一、线性渐变打造条纹背景

CSS 的 linear-gradient() 函数不仅可以实现平滑的颜色过渡，还能通过透明与不透明的分界，制造出规律的条纹效果。

css 复制代码 
#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），无论格子的大小如何变化。

css 复制代码 
#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 控制线宽。

  • 横向 + 纵向叠加出网格效果。

🖼️ 效果图：

🧭 三、逼真的蓝图网格（叠加多层渐变）

通过叠加不同粗细与透明度的网格线，可以模拟更真实的"制图蓝图"效果。

css 复制代码 
#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()）非常适合创建圆形或椭圆形图案。

css 复制代码 
#div4 {
    width: 300px;
    height: 200px;
    background: #655;
    background-image: radial-gradient(tan 30%, transparent 0);
    background-size: 30px 30px;
}

🟤 原理：

  • tan 30% 生成浅棕色圆点。

  • 透明部分露出底色形成规则点阵。

🖼️ 效果图：

💫 五、波点图案（双层径向渐变）

通过两层偏移叠加的径向渐变，即可实现经典的波点布纹理。

css 复制代码 
#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() 倾斜叠加，轻松绘制出棋盘背景。

css 复制代码 
#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

css 复制代码 
@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

css 复制代码 
@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 代码运行：

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>

🔗 十、延伸阅读

相关推荐
m0_3760470710 天前
使用Python进行Web数据挖掘的实践指南
sass
向上的车轮17 天前
CSS 预处理器：Sass的基本用法、核心特性
css·sass
向上的车轮18 天前
Sass 与 Bootstrap 5的区别是什么？
bootstrap·sass
wyzqhhhh20 天前
less和sass
前端·less·sass
zheshiyangyang1 个月前
Sass开发【四】
前端·css·sass
幸运小圣1 个月前
Sass和Less的区别【前端】
前端·less·sass
BillKu1 个月前
vue3 样式 css、less、scss、sass 的说明
css·less·sass·scss
@八度余温1 个月前
预处理器Sass/Scss、Less 的区别，项目中写法
less·sass·scss
纷享销客智能型·CRM2 个月前
AI赋能CRM：纷享销客访销大脑重构快消品销售策略
sass
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南082025软件测试面试八股文（含答案+文档）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10Labelme从安装到标注：零基础完整指南