CSS多重repeating-linear-gradient不生效，如何实现方格条纹效果？

你的代码中两个重复线性渐变都是不透明的纯色，第一个横向渐变会完全覆盖在第二个纵向渐变之上，因此只能看到竖线效果。要实现方格条纹，需要让两个渐变层能叠加显示，以下是两种可行方案：

方案一：使用半透明颜色（rgba） #

将其中一个渐变的颜色改为带透明度的rgba格式，让下层渐变可以透出来：

.bg {
    height: 100px;
    background: 
        repeating-linear-gradient(90deg, #939393, #939393 1.25px, #9bceae 1.25px, #9bceae 6.25px), 
        repeating-linear-gradient(0deg, rgba(147, 147, 147, 0.5), rgba(147, 147, 147, 0.5) 1.25px, transparent 1.25px, transparent 6.25px);
}

你可以调整rgba中的透明度值（最后一个参数），来控制方格条纹的深浅。

方案二：使用背景混合模式 #

通过background-blend-mode属性让两个背景层混合，无需修改颜色透明度：

.bg {
    height: 100px;
    background: 
        repeating-linear-gradient(90deg, #939393, #939393 1.25px, #9bceae 1.25px, #9bceae 6.25px), 
        repeating-linear-gradient(0deg, #939393, #939393 1.25px, #9bceae 1.25px, #9bceae 6.25px);
    background-blend-mode: multiply;
}

multiply模式会让两个背景层的颜色相乘叠加，从而显示出交叉的方格条纹，你也可以尝试其他混合模式（如screen）来获得不同的视觉效果。

内容的提问来源于stack exchange，提问作者Shubham A.