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

正确写法是叠加两个方向一致的repeating-linear-gradient（横向+纵向），颜色断点与background-size严格匹配为重复单元尺寸，用transparent确保仅重叠区显色，避免实色混合或拉伸错位。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，或者尺寸和渐变重复单位对不上。必须显式设置 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 下易错位）。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。