background-repeat: no-repeat需作用于含background-image的元素，简写background会重置子属性，单向平铺用repeat-x/repeat-y或repeat no-repeat（顺序不可颠倒），background-size过大时no-repeat看似失效实为显示区域受限，SVG/渐变背景有特殊表现。
background-repeat 怎么设才不平铺
设成 no-repeat 就行，但很多人写了没效果，其实是被其他层叠规则覆盖了，或者写在了错误的 CSS 选择器里。
-
background-repeat: no-repeat必须作用在设置了background-image的元素上，光写 repeat 不写图，浏览器直接忽略 - 如果用了简写
background，它会重置所有子属性（包括 repeat），得把no-repeat显式写全：background: url(...) no-repeat; - 注意继承：
background-repeat不继承，父元素设了没用，必须落在目标元素本身
平铺方向控制：只横向或只纵向重复
默认 repeat 是两个方向都铺，真要单向，就得拆开写 repeat-x 或 repeat-y —— 这俩是历史遗留值，仍被所有浏览器支持，但更推荐用双值语法。
- 现代写法用两个关键词：
background-repeat: repeat no-repeat表示横向重复、纵向不重复 - 顺序固定：第一个值管水平（x），第二个管垂直（y）；写反了无效，比如
no-repeat repeat是合法的，但意思刚好相反 - 别混用旧值和新值，
repeat-x和repeat no-repeat同时存在时，后者优先级更高，容易误判
background-repeat 和 background-size 冲突怎么办
当 background-size 把图缩放到比容器还大时，no-repeat 看起来像“没生效”——其实它生效了，只是图太大，只显示左上角一小块，让人误以为还在平铺。
- 典型现象：设了
no-repeat，但背景只显示一半，边缘留白；这时先检查background-size: cover或contain是否拉伸过度 -
background-size: 100% 100%+no-repeat才能确保整图完整显示且不重复 - 如果要用
cover又想避免裁切错觉，记得配合background-position调整锚点，否则默认居中可能切掉关键内容
SVG 或渐变背景下 background-repeat 的特殊行为
SVG 作为背景图时，background-repeat 依然起作用，但 SVG 自身有 viewBox 和 preserveAspectRatio，会和 CSS 的 repeat 产生叠加效果，结果难预测。
- 线性渐变（
linear-gradient）默认就是repeat，但它是“重复渲染”，不是贴图复用；设no-repeat会直接让渐变只占一块区域，边缘突变 - 用
repeating-linear-gradient替代linear-gradient+repeat，语义更准，兼容性也更好 - 内联 SVG 路径里带
width/height属性时，CSS 的background-size可能失效，此时repeat行为也会异常
真正麻烦的不是 repeat 本身，而是它总在和其他背景属性暗中较劲。调的时候盯住 computed styles 面板，别只看自己写的那行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
