CSS如何实现网格背景？repeating-linear-gradient用法详解

在CSS中实现网格背景效果，repeating-linear-gradient是一个非常实用的工具，它可以通过生成重复的线性渐变来模拟网格线条，无需额外引入图片资源，还能灵活调整网格的样式和尺寸。

repeating-linear-gradient基础语法

repeating-linear-gradient是CSS渐变模块中的函数，用于创建重复的线性渐变，其基本语法如下：

/* 基础语法 */
background-image: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);

/* 参数说明 */
/* direction：渐变方向，可以是角度（如45deg）或者关键词（如to right） */
/* color-stop：颜色断点，格式为颜色 位置，位置可以是百分比或者具体长度 */

和普通linear-gradient的区别在于，repeating-linear-gradient会将定义的渐变区间不断重复，直到铺满整个背景区域，这个特性刚好可以用来生成重复的网格线条。

实现基础网格背景

要实现最基础的黑白网格背景，我们可以分别设置水平和垂直的重复渐变，叠加在一起即可。以下是实现10px间距的基础网格的代码示例：

.grid-bg {
    width: 300px;
    height: 300px;
    background-image: 
        repeating-linear-gradient(
            to right,
            #000 0px,
            #000 1px,
            transparent 1px,
            transparent 10px
        ),
        repeating-linear-gradient(
            to bottom,
            #000 0px,
            #000 1px,
            transparent 1px,
            transparent 10px
        );
}

上面的代码中，第一个渐变定义了垂直方向的线条：从0到1px是黑色，1px到10px是透明，这个1px的黑色线条会每10px重复一次，形成垂直网格线。第二个渐变同理，生成水平网格线，两个渐变叠加后就形成了完整的网格背景。

实现虚线网格背景

如果想要网格线是虚线效果，只需要调整颜色断点的位置和透明区间的长度即可。以下是实现虚线网格的示例：

.dashed-grid-bg {
    width: 300px;
    height: 300px;
    background-image: 
        repeating-linear-gradient(
            to right,
            #666 0px,
            #666 2px,
            transparent 2px,
            transparent 5px
        ),
        repeating-linear-gradient(
            to bottom,
            #666 0px,
            #666 2px,
            transparent 2px,
            transparent 5px
        );
    background-color: #f5f5f5;
}

这里将黑色线条的长度设置为2px，透明区间设置为3px，这样每5px就会有一个2px的短线条，形成虚线效果，同时给容器设置了浅灰色背景，让虚线网格更明显。

实现彩色网格背景

repeating-linear-gradient支持任意颜色设置，我们可以轻松实现彩色网格背景，比如给水平和垂直网格线设置不同颜色：

.color-grid-bg {
    width: 300px;
    height: 300px;
    background-image: 
        repeating-linear-gradient(
            to right,
            #ff0000 0px,
            #ff0000 1px,
            transparent 1px,
            transparent 15px
        ),
        repeating-linear-gradient(
            to bottom,
            #0000ff 0px,
            #0000ff 1px,
            transparent 1px,
            transparent 15px
        );
}

这个示例中垂直网格线是红色，水平网格线是蓝色，网格间距设置为15px，整体视觉效果更加丰富。

注意事项

• 网格线条的宽度和间距由颜色断点的位置决定，比如线条宽1px，间距10px，那么单个渐变周期的总长度就是11px（1px线条+10px透明）。
• 如果同时设置多个渐变背景，要注意叠加顺序，先写的渐变会覆盖在后写的渐变之上。
• 可以通过background-size属性调整背景的尺寸，但使用repeating-linear-gradient时一般不需要额外设置，渐变会自动重复铺满容器。

repeating-linear-gradient实现的网格背景是纯CSS生成的，相比图片背景有更好的适配性和更小的资源占用，适合大多数常规网格背景场景。

CSSrepeating-linear-gradient网格背景线性渐变修改时间：2026-06-28 09:00:23