background-repeat: round 使背景图自动缩放以完整铺满容器且不裁剪、不拉伸，边缘对齐；它通过调整图片自身比例而非重复次数实现平铺，适用于响应式卡片、图标网格等需整图清晰填满的场景。
background-repeat: round 是什么效果
它会让背景图自动缩放，刚好铺满容器且不裁剪、不拉伸，边缘对齐——但不是靠重复次数控制，而是靠“缩放图片本身”来实现平铺。常见误解是把它当 repeat 的增强版，其实它是独立逻辑：先算出能完整铺满的缩放比例，再按该比例渲染多份。
典型使用场景：响应式卡片背景、图标网格、需要保持整图清晰又填满区域的设计。
注意：round 在 Firefox 早期版本（
为什么 background-repeat: round 不生效
最常踩的坑是忘了配 background-size。默认 background-size 是 auto，而 round 必须配合明确尺寸才能计算缩放比——哪怕只是写成 background-size: 100% 100% 都不行，因为那会强制单张图撑满，失去“重复+缩放”的前提。
立即学习“前端免费学习笔记（深入）”；
正确做法是让背景图保持原始尺寸参与计算：
- 显式设
background-size: auto（可省略，但建议写上以示意图） - 确保
background-image路径有效，且图片本身宽高比合理（极端瘦高或扁宽图在round下可能缩到看不见） - 避免同时设置
background-clip或background-origin导致绘制区域异常
错误示例：background-repeat: round; background-size: cover; —— cover 已经接管缩放逻辑，round 直接被忽略。
round 和 space 的区别在哪
round 缩放图片自身来填满；space 则保持图片原尺寸，靠调整间距让多张图均匀分布、首尾贴边。两者都解决“铺不满又不想拉伸”的问题，但策略相反。
关键差异点：
-
round：图片变小了，数量可能变多（比如原图 100×100，容器 320×240 → 缩到 ~80×80，铺 4×3=12 张） -
space：图片大小不变，只加空隙（同上例，可能铺 3×2=6 张，中间留白） - 当容器尺寸不能被原图整除时，
space可能出现明显间隙，round则无间隙但图变模糊（缩放失真）
性能上，round 涉及实时缩放计算，复杂布局中频繁重绘可能略卡；space 更轻量。
实际写法要注意哪些细节
别只写 background-repeat: round，必须搭配其他声明才能稳住行为：
- 推荐组合：
background-repeat: round; background-size: auto; - 如果要限制最大缩放倍数，可用
background-size: auto 100%（高度固定为容器高，宽度按比例缩） - 横向用
round、纵向用no-repeat？可以，但写成background-repeat: round no-repeat，顺序不能反 - 慎用在
background-attachment: fixed元素上——滚动时缩放计算可能抖动
一个最小可用示例：
div {
background-image: url("icon.png");
background-repeat: round;
background-size: auto;
width: 300px;
height: 200px;
}
真正难的是预判缩放后的清晰度。小图被放大、大图被缩小，都可能糊——这没法靠 CSS 修复，得从资源源头控制尺寸范围。
