背景Logo应使用background-image配合background-position: center、background-repeat: no-repeat及合适的background-size（contain/cover/定值），并注意background-origin和响应式媒体查询，避免误用<img>元素。
背景上的 Logo 通常指用 background-image 设置在某个容器（比如 <body> 或 <header>）上的图片，不是作为 HTML 元素插入的 <img>。这种场景下，“居中”本质是控制背景图的定位和缩放行为，不是布局居中——混淆这点会导致反复调试无效。
background-position: center 不等于视觉居中
很多人加了 background-position: center 却发现 Logo 还是偏上/偏左，原因在于：它只让背景图的“原点”对齐到容器中心，不控制图本身是否填满或裁剪。尤其当 Logo 图尺寸远小于容器、或容器有 padding/margin 时，center 只是数学中心，不是视觉中心。
- 必须配合
background-repeat: no-repeat，否则重复平铺会掩盖居中效果 - 如果容器高度不确定（比如
<body>随内容伸缩），background-position: center仍有效，但垂直方向可能落在内容区中间而非视口中央 - 想强制相对于视口居中？得把背景设在
<body>上，并加background-attachment: fixed——但滚动时会“粘住”，慎用
background-size 怎么选：contain 还是 cover？
background-size 直接决定 Logo 是否被拉伸、裁剪或留白，选错会让“居中”失去意义。
-
background-size: contain：等比缩放至完全可见，常留白；适合强调 Logo 完整性（如品牌规范要求不可裁剪） -
background-size: cover：等比缩放至填满容器，可能裁边；适合全屏氛围图，但 Logo 关键部分可能被切掉 -
background-size: 200px auto：手动定宽，高度自适应；适合已知 Logo 原始比例且需精确控制大小的场景 - 避免用
100% 100%——强行拉伸失真，尤其是 PNG 透明底 Logo
响应式背景 Logo 的关键兼容写法
移动端小屏下，contain 可能导致 Logo 过小看不清，cover 又可能裁掉关键文字。需要媒体查询干预：
立即学习“前端免费学习笔记（深入）”；
body {
background-image: url('logo-bg.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: padding-box;
}
<p>@media (max-width: 768px) {
body {
background-size: 120px auto; /<em> 小屏固定宽度，避免过小 </em>/
}
}</p><p>@media (min-width: 1200px) {
body {
background-size: cover; /<em> 大屏填满增强视觉 </em>/
}
}注意：background-origin: padding-box 确保定位基准包含 padding 区域，避免因 padding 导致“看似居中实则偏移”；iOS Safari 旧版对 background-size: contain 渲染有微小偏差，加 background-position: center center（双值写法）更稳。
为什么不用 <img> + absolute 定位做背景 Logo？
有人试图用 <img src="..." style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)..."> 模拟背景 Logo，这在技术上可行，但会带来三个实际问题：
- 它是个真实 DOM 元素，会参与可访问性树（AT），屏幕阅读器可能误读为主要内容，需加
aria-hidden="true" - 脱离文档流后，若页面有滚动锚点或 JS 计算视口位置，可能干扰逻辑
- 加载失败时留白或显示 alt 文本，破坏背景一致性；而 CSS
background-image失败则静默降级
真正需要“背景 Logo”的场景，就该用背景图方案——它的语义、性能和可控性都更匹配。强行用 <img> 是把简单问题复杂化。
