background-size: cover未生效的根本原因是容器高度为0或未显式设置尺寸，必须配html、body{height:100%}、目标元素min-height:100vh、background-position:center center及background-repeat:no-repeat，否则裁剪失效或显示异常。
background-size: cover 为什么没生效？
多数人写 background-size: cover 却发现背景图还是拉伸变形或留白，根本原因是没配对设置 background-attachment 和容器尺寸约束。浏览器默认把背景图锚定在元素内容区，如果父容器高度为 auto（比如 <div> 没设高），那即使写了 <code>cover，实际渲染区域可能只有几像素高，裁剪自然失效。
- 必须给承载背景图的元素明确的高度，常见做法是设
height: 100vh或用min-height: 100vh - 避免父级有
overflow: hidden且自身没设position: relative，否则裁剪区域会被意外截断 -
background-repeat: no-repeat要显式声明，否则某些旧版 Safari 会忽略cover
如何让背景图始终居中且不露白边？
仅靠 cover 不够——它只保证“覆盖”，但裁剪起点默认从左上角开始，窗口变窄时容易切掉人脸或关键内容。真正可控的方式是组合使用 background-position。
- 优先用
background-position: center center（等价于50% 50%），确保裁剪中心始终对准图像中心 - 若需突出某区域（如人物脸部），改用具体偏移值，例如
background-position: 30% 20%，表示横向30%、纵向20%处为裁剪中心点 - 慎用
background-position: top等关键词，它们在不同设备上解析精度不一致，尤其在 iOS Safari 中易偏移
移动端适配时 background-image 加载失败怎么办？
直接写 background-image: url(...) 在移动网络弱或图片大时，会出现白屏或闪烁。这不是 CSS 问题，而是资源加载时机与渲染顺序冲突。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
image-set()提供多分辨率源：background-image: image-set("bg@1x.jpg" 1x, "bg@2x.jpg" 2x) - 关键背景图建议内联 base64（限小图，
- 配合
background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(...)叠加一层蒙版，掩盖加载空白
用 object-fit 替代 background-image 更可控？
当背景图需要响应式缩放+精确控制裁剪区域（比如做 banner 图或头图），用 <img> 标签配合 object-fit: cover 比纯 CSS 背景更可靠——它把图片当内容处理，继承父容器的盒模型行为，不受 background-clip 或 background-origin 干扰。
- HTML 结构示例：
<div class="hero">@@##@@</div>
- CSS 关键句：
.hero { position: relative; height: 100vh; } .hero img { width: 100%; height: 100%; object-fit: cover; } - 注意：必须给
<img src="hero.jpg" alt="">设width和height，否则object-fit不生效；同时要加alt=""避免屏幕阅读器误读
height: auto 或图片 404 了，cover 就只是个摆设。
