background-size: cover 不能实现无缝平铺，它仅等比缩放单张图片以覆盖容器，不重复且可能裁剪；真正无缝平铺需用 background-repeat: repeat 配合可平铺小图，并以 min-height: 100vh 确保全屏。
background-size: cover 本身不能实现“无缝平铺”，它只会缩放图片以完全覆盖容器（可能裁剪），且默认只显示一次。要实现全屏 + 无缝平铺，需明确两点：一是“全屏”指覆盖整个视口，二是“无缝平铺”意味着图片重复填充、边缘对齐无断裂——这和 cover 的语义本质冲突。
为什么 cover ≠ 平铺
background-size: cover 的作用是：等比缩放背景图，使其宽高都 ≥ 容器宽高，从而完全覆盖容器。它不重复图片（默认 background-repeat: repeat 被覆盖失效），也不保证重复时的接缝对齐。所以它解决的是“填满不拉伸”，不是“无缝重复”。
真正需要的效果其实是两个独立需求的组合
你需要的是：
-
全屏覆盖：让背景占据整个视口（
height: 100vh; width: 100vw;或用min-height: 100vh） -
无缝平铺：使用
background-repeat: repeat，并确保原图本身是可平铺的（即左右/上下边缘像素匹配，常见于纹理图、几何图案、代码生成的 tile 图）
正确做法：不用 cover，改用 repeat + 可平铺图
示例 CSS（假设你有一张专为平铺设计的小图 tile.png）：
body {
margin: 0;
min-height: 100vh;
background-image: url('tile.png');
background-repeat: repeat;
background-position: top left;
}
关键点：
- 图片必须是真正的平铺素材（如 8×8 像素的噪点图、20×20 的斜线纹理），否则会看到明显接缝
- 不要设
background-size（或设为auto），让它按原始尺寸重复 - 用
min-height: 100vh确保内容少时也撑满屏幕，避免滚动条干扰平铺视觉
如果只有大图，又想“类 cover + 类平铺”？有折中方案
严格意义上不可兼得，但可模拟：
- 用
background-size: 100% 100%+repeat：图片被拉伸填满单个单元格再重复，易失真 - 用 CSS 渐变叠加纹理：例如
background: linear-gradient(45deg, #000 25%, transparent 25%), linear-gradient(-45deg, #000 25%, transparent 25%); background-size: 20px 20px;—— 完全可控、无图、真正无缝 - 用
object-fit: cover配合<img>全屏作为伪背景：适合单图场景，但不是 CSS background，无法真正平铺
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
