图片间白边主因是html空白符，默认产生约4px间隙；解法依次为font-size:0、注释隔开、flex布局（需gap:0+display:block+统一尺寸）或background-repeat；导出png须关闭抗锯齿，且应添加image-rendering确保像素级清晰。
图片之间有白边？先确认是不是 HTML 换行符惹的祸
你写的 <img src="a.jpg"> 和下一张 <img src="b.jpg"> 中间只要有一个换行或空格，浏览器就会渲染出约 4px 宽的不可见间隙——这不是 bug，是 HTML 规范里“空白字符参与布局”的默认行为。
最直接验证方式：把所有 <img> 标签连写成一行，比如 <img><img><img>，刷新看缝隙是否消失。如果消失了，问题就定位准了。
- 不推荐长期用连写形式：可读性差、Git diff 难、团队协作易出错
- 更稳妥的解法是给父容器加
font-size: 0，再单独给图片内文字（如有）恢复字号 - 或者用注释隔开：
<img><!-- --><img>，兼容性好，但略冗余
用 display: flex 做横向无缝拼接的关键配置
Flex 是目前最可控、最易响应式的方案，但光写 display: flex 不够，漏掉任意一项都可能留缝。
- 父容器必须设
gap: 0（注意 IE 不支持，需用margin-right回退） - 每张
<img>要加display: block或vertical-align: top，否则基线对齐会留下底部缝隙 - 所有图片得统一尺寸逻辑：要么显式设
width/height，要么用object-fit: cover+ 固定容器高宽 - 别忽略
min-width: 0：Flex item 默认min-width: auto，窄屏下可能拒绝收缩，导致横向滚动条或错行
为什么 background-image + repeat 更适合规则纹理拼接
如果你拼的是小图标、网格、马赛克、背景纹理这类重复单元，<img> 标签拼接纯属绕路。DOM 元素间隙、加载时序、缩放模糊全得手动兜底。
换成 CSS 背景图，一行 background-repeat: repeat 就能无限铺满，完全规避 HTML 解析和渲染层的干扰。
- 写法示例：
div { background-image: url("tile.png"); background-repeat: repeat; } - 若需适配 DPR，确保原始图是 2x/3x 尺寸，并加
background-size: 100% 100%控制缩放 - 关键细节：导出 PNG 时关掉“半透明边缘”或“抗锯齿”，否则像素边界模糊会导致接缝发虚
image-rendering 这个属性很多人根本没加
即使 DOM 无间隙、尺寸对齐、背景图也设好了，图片在非整数倍缩放时仍可能发虚——这是浏览器插值算法在作祟，尤其在 canvas 绘图或高 DPR 屏幕上明显。
加这一行能强制启用像素级渲染：
img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
但要注意：crisp-edges 在部分旧版 Firefox 或 Safari 中可能被忽略，实测比盲信文档更重要。真正难的不是写这行 CSS，而是确认每张图导出时是否带了 1px 的透明边、CMS 是否偷偷加了 padding、CDN 是否做了自动压缩重采样——这些细节一错，无缝就变成“几乎无缝”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
