响应式图片斑马线平铺本质是background-repeat平铺纹理图+background-position控制起始位置；不可用cover与repeat混用，须设background-size为auto或具体尺寸；需确保容器有高度、路径正确、样式未被覆盖。
直接说结论：所谓“响应式图片斑马线平铺”，本质是两件事的组合——用 background-repeat 实现纹理图的无缝平铺，再用 background-position + 容器结构控制视觉上的“条纹起始位置”。它不是一张图拉伸成条纹，也不是靠 <img> 标签生成斑马线，更不是用 JavaScript 逐行画色块。
为什么不能用 background-size: cover 配 repeat？
因为 cover 和 repeat 是互斥的：background-size: cover 会强制把背景图缩放为单张满屏显示，直接禁用所有平铺行为。浏览器遇到这种矛盾声明时，通常以 cover 为准，repeat 形同虚设。真要平铺，必须确保 background-size 是 auto（默认）或明确指定像素/百分比尺寸，且不触发覆盖逻辑。
- 错误写法：
background: url('stripe.png') repeat / cover;→ 平铺失效 - 正确写法：
background: url('stripe.png') repeat / 20px 40px;→ 每块 20×40 像素重复 - 若图本身是 2×20px 的细横条，保持
background-size: auto即可自然密集平铺
如何让“斑马线”从导航栏下方开始平铺？
关键不是“画斑马线”，而是把平铺起点下移。比如你有一个固定高 64px 的 <header></header>，想让背景条纹从它下面才开始出现，就得用 background-position 把图的绘制原点往下推。
- 最稳妥方式：给
body或主容器加padding-top: 64px，再对这个容器设background，避免负偏移带来的渲染边界问题 - 直接偏移写法：
background-position: 0 64px—— 但要求容器有明确高度（如min-height: 100vh），否则可能只在内容区生效 - 响应式写法：
background-position: 0 4rem，前提是html { font-size: 16px }且 header 也用rem控高，否则单位错位 - 绝对不要写
background-position: 0 64px 0—— 这是三值语法，CSS 解析失败，整条规则被丢弃
小纹理图平铺时常见失效原因
你选了一张 8×8px 的灰白噪点图，写了 repeat 却看不到平铺？大概率卡在这几个地方：
-
body没高度：空页面下body高度为 0 → 必须加html, body { height: 100%; }和body { min-height: 100vh; } - 路径加载失败：打开开发者工具 Network 标签，确认图片返回状态码是
200，不是404或跨域拦截 - 样式被覆盖：检查 computed 样式里
background-repeat是否真为repeat，有些重置 CSS（如 normalize.css）会把body的 background 简写成background: #fff，清掉了 repeat - 图本身没对齐：左右边缘像素不一致会导致平铺接缝明显 → 用图像编辑器检查并修正边缘像素
真正难的不是写那几行 CSS，而是判断“平铺没出现”到底是图没加载、容器塌陷、还是样式被静默覆盖——这三个问题在实际项目里出现频率远高于语法错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
