CSS如何实现背景颜色的棋盘格分布_利用repeating-gradient-css教程-PHP中文网

正确写法是叠加两个方向一致的repeating-linear-gradient（横向+纵向），颜色断点与background-size严格匹配为重复单元尺寸，用transparent确保仅重叠区显色，避免实色混合或拉伸错位。

css如何实现背景颜色的棋盘格分布_利用repeating-gradient

repeating-gradient 实现棋盘格背景的正确写法

直接用 repeating-gradient 做棋盘格，不是“两个线性渐变叠一起”就行，关键在颜色断点的位置和重复单元的尺寸匹配。错一点，就会出现色块拉伸、缝隙、或根本看不出格子。

必须用两个方向的 repeating-gradient 叠加（一个横向条纹 + 一个纵向条纹），且都设为透明/不透明交替
每个渐变的重复长度（repeating-linear-gradient(0deg, #000 0, #000 10px, transparent 10px, transparent 20px)）要完全一致，否则错位
两个渐变的起始偏移最好都从 0 开始，避免因浏览器渲染精度导致首格偏移

典型写法：

background-image: 
  repeating-linear-gradient(0deg, #000 0, #000 10px, transparent 10px, transparent 20px),
  repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 20px);

为什么用 transparent 而不是第二色值

用 transparent 是为了确保叠加后只有“双重重叠区”显色，其他区域保持底层颜色（比如白色背景或父容器背景）。如果用两个实色（如 #000 和 #fff），叠加结果会是混合色，不是清晰的黑白格。

transparent 在 CSS 中参与混合时等效于 alpha=0，不会污染底层色
若需自定义格子色（比如灰格+白底），只需改第一个渐变里的非透明色，第二个保持 transparent
千万别写成 repeating-linear-gradient(..., #fff 10px, #fff 20px)——这会产生实心条纹，不是空隙

常见错误：背景不显示或全是黑/白

最常踩的坑是没设 background-size，或者尺寸和渐变重复单位对不上。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

必须显式设置 background-size: 20px 20px（数值 = 单个渐变的完整周期，如上面例子中 0→20px）
漏掉 background-size 会导致浏览器按默认值（通常 100% 宽高）拉伸，格子被撑满整个容器，看起来像纯色
如果用了 background-position 偏移，但没同步调整 background-size，也会错位
检查是否意外覆盖了 background-color ——它会盖住所有渐变层

兼容性和性能注意点

repeating-gradient 在 Chrome 26+/Firefox 16+/Safari 15.4+ 支持良好，但 IE 完全不支持，Edge 12–18 有 bug（尤其在缩放或 transform 下易错位）。

移动端 Safari 对小尺寸（）重复单元渲染不稳定，建议最小用 4px 起
比 background-image: url(...) 稍重，但远轻于 canvas 绘制；复杂动画中频繁修改 background-size 可能触发重绘
如需响应式棋盘格（比如随容器缩放），别用固定像素值，改用 em 或 rem，并确保字体大小可控

真正麻烦的是“斜向棋盘格”或“非正方形格子”——那得换思路，repeating-gradient 天然只适合水平+垂直组合。这种时候，别硬套，该用 SVG 就用 SVG。