全屏背景图需设html, body{height:100%;margin:0}并给容器min-height:100vh，用background-size:cover居中覆盖，优先WebP格式+占位图优化加载，移动端用--vh变量或flex布局规避vh缺陷。
background-image 用 width/height 100% 不生效？
直接写 width: 100%; height: 100% 对 <body> 或 <html> 无效，因为它们默认高度由内容撑开，不是视口高度。必须显式让根级元素“占满整个屏幕”。
-
html, body { height: 100%; margin: 0; }—— 先清空默认边距，再让两者继承 100% 高度 - 给目标容器（通常是
body或一个全屏<div>）加min-height: 100vh，比height: 100%更可靠，能应对内容少时仍铺满的场景 - 避免只设
height: 100vh：当页面有滚动条或内容超出视口时，可能造成底部被截断
background-size: cover 和 contain 的区别在哪？
二者都影响铺满效果，但行为完全不同：cover 保证背景图完全覆盖容器（可能裁剪），contain 保证整张图完整显示（可能留白）。全屏背景几乎总是用 cover。
-
background-size: cover—— 图片等比缩放，直到宽高至少有一边填满容器，另一边可能溢出 -
background-size: 100% 100%—— 强制拉伸，会严重变形，不推荐 - 配合
background-position: center center可确保焦点区域始终居中，避免关键内容被裁掉
图片模糊、加载慢或闪一下怎么办？
全屏背景图常见于首屏，用户体验敏感。问题往往出在图片体积、加载时机或渲染策略上。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用 WebP 格式替代 JPG/PNG，同质量下体积小 30%–50%，
<picture>+<source>可做兼容降级 - 避免在 CSS 中直接写大图 URL；可先用低分辨率占位图（如 20KB 内），再用 JS 检测
load后替换为高清图 - 加
background-repeat: no-repeat和background-attachment: fixed要谨慎：fixed在移动端可能触发重绘卡顿，且部分安卓浏览器不支持平滑滚动
移动端适配经常失效？
iOS Safari 和部分安卓 WebView 对 vh 单位有特殊行为：地址栏收起/展开时，100vh 会动态变化，导致背景跳动或留白。
立即学习“前端免费学习笔记（深入）”；
- 用 JavaScript 动态设置高度：
document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，CSS 中用height: calc(var(--vh, 1vh) * 100) - 更轻量方案：改用
min-height: 100%+display: flex布局，让子容器撑满父级，避开vh缺陷 - 测试时务必真机操作，模拟器常无法复现地址栏高度变化问题
实际最简可用组合就是：html, body { margin: 0; height: 100%; } + body { background: url(...) no-repeat center/cover; min-height: 100vh; }。但只要页面结构稍复杂、有固定定位元素或要兼容 iOS 滚动，就得立刻补上动态 --vh 或 flex 布局兜底——这点容易被忽略。
