html背景图片如何只显示一张图片大小

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 更适合“单图展示”场景

如果你只是想在页面里摆一张图、让它老老实实按原始尺寸或响应式缩放，直接用 标签更可控、语义正确、seo 友好、支持 srcset 和 loading="lazy"。

立即学习“前端免费学习笔记（深入）”；

• background-image 本质是装饰，不适合承载内容型图片
• 当需要鼠标悬停切换图、js 动态换图、或图需被屏幕阅读器识别时， 是唯一合理选择
• 只有当你需要“图作为容器视觉层叠底色”，且明确不需要交互/语义/响应式控制时，才该用背景图

真正容易被忽略的是：所谓“只显示一张”，背后其实是三个独立开关的组合——是否平铺、如何缩放、怎么定位。少关一个，效果就跑偏。别背口诀，每次打开开发者工具调一遍 background-repeat 和 background-size，看实时变化，比记规则快得多。