background-image 默认重复铺满容器，需同时设置 background-repeat: no-repeat、background-size: auto 或 contain、background-position: center 才能实现单张原图居中显示。
background-image 重复铺满是默认行为
CSS 的 background-image 默认会平铺（repeat），哪怕你只设了一张图，也会填满整个容器。这不是 bug，是规范设计——浏览器根本不知道你“只想显示原图大小”。
用 background-size: contain 或 auto 配合 no-repeat
想让背景图只显示一张、不拉伸、不裁剪、居中显示，关键不是“限制张数”，而是关掉平铺 + 控制尺寸：
-
background-repeat: no-repeat—— 必须加，否则永远铺满 -
background-size: contain—— 图片完整可见，等比缩放至最大可容纳尺寸（可能留白） -
background-size: auto—— 保持原始像素尺寸（100px × 80px 就真占 100×80），超出部分被裁剪或隐藏（取决于background-clip和容器 overflow） -
background-position: center—— 配合上面两项，确保图在可视区居中
示例：
div {
background-image: url("logo.png");
background-repeat: no-repeat;
background-size: auto;
background-position: center;
}
background-size: 100% 100% 是常见误用
很多人以为写 background-size: 100% 100% 就能“按容器大小显示一张”，实际它会强制拉伸图片填满容器，完全失真。这不是“显示一张”，是“拉扯一张”。
- 要保持原比例？用
contain或cover - 要严格按图片原始像素显示？用
auto - 要适配高倍屏但又不想模糊？得额外处理
image-set()或 srcset 逻辑，纯 CSS 背景图做不到自动换高清源
img 标签比 background-image 更适合“单图展示”场景
如果你只是想在页面里摆一张图、让它老老实实按原始尺寸或响应式缩放，直接用 srcset 和 loading="lazy"。
立即学习“前端免费学习笔记（深入）”；
-
background-image本质是装饰，不适合承载内容型图片 - 当需要鼠标悬停切换图、JS 动态换图、或图需被屏幕阅读器识别时，
- 只有当你需要“图作为容器视觉层叠底色”，且明确不需要交互/语义/响应式控制时，才该用背景图
真正容易被忽略的是：所谓“只显示一张”，背后其实是三个独立开关的组合——是否平铺、如何缩放、怎么定位。少关一个，效果就跑偏。别背口诀，每次打开开发者工具调一遍 background-repeat 和 background-size，看实时变化，比记规则快得多。
