background-repeat 默认值是 repeat，即背景图在横纵两个方向重复铺满；若未铺满，通常是元素无高度导致无空间重复，需检查渲染尺寸是否为0×0。
background-repeat 默认值是什么，为什么图片没铺满
默认是 repeat，也就是横向纵向都重复。但如果你设了背景图却只看到一张、没铺开，大概率是因为元素本身没高度——background-repeat 再怎么设，也得有“地方”才能重复。常见于空的 div、未设置 height 或 min-height 的容器，或者内容塌陷导致高度为 0。
检查方法很简单：打开开发者工具，看那个元素的实际渲染尺寸是不是 0×0。不是图片没重复，是根本没空间可重复。
repeat-x 和 repeat-y 容易写反的两个坑
repeat-x 是水平方向重复（X 轴），repeat-y 是垂直方向重复（Y 轴）。但很多人凭直觉以为 “x 就是上下”，结果把横向条纹图设成 repeat-y，反而变成一整列竖条，页面直接错乱。
- 横向渐变/分割线类背景 → 用
repeat-x - 侧边栏纹理、垂直分隔背景 → 用
repeat-y - 如果用了
background-size缩放图片，repeat-x/repeat-y仍按缩放后的尺寸切片重复，不是原始图尺寸
no-repeat + background-position 配合不好就露白边
no-repeat 本身不控制位置，全靠 background-position 定位。但很多人设了 no-repeat 就以为“稳了”，结果在不同屏幕宽度下，图片被挤到角落，旁边大片留白。
典型场景：给 header 设单张 logo 背景，background-repeat: no-repeat; background-position: right center; —— 看似合理，但一旦窗口变窄，right 可能贴到边缘外，视觉上就“掉出去”了。
- 优先考虑
background-position: center或left center这类相对稳定的值 - 需要右对齐又防溢出？加
background-clip: padding-box防止背景画到 border 外 - 真要响应式定位，不如改用
background-image配合媒体查询，比硬调 position 更可控
space 和 round 值在高 DPI 屏或缩放下表现不稳定
space（均匀分布，不裁剪）和 round（缩放图片以填满，允许轻微拉伸）是 CSS Backgrounds Level 4 新增的值，看着很美，但实际兼容性和渲染一致性差：
- Chrome 90+ 支持尚可，Safari 直到 16.4 才完整支持
space，旧版 iOS Safari 会直接退回到repeat - Windows 缩放 125% / 150% 时，
round可能反复重算尺寸，造成背景“跳动” -
space在容器宽高不能被图片整除时，间隙像素值可能不是整数，高 DPI 屏上出现模糊边线
除非明确只跑现代 Chrome 内部系统，否则生产环境慎用这两个值——用 repeat + background-size: contain 或 JS 动态计算，反而更稳。
最常被忽略的一点：background-repeat 不影响 background-image: linear-gradient() 这类纯色渐变，因为渐变本就是无限延展的；只有位图才真正受它控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
