应使用 background-size: cover 配合 background-position: center center 和 background-repeat: no-repeat 实现等比缩放裁剪铺满；容器需设 min-height: 100vh（或 min-height: 100vh; height: 100dvh）确保渐变正常渲染；按钮需手动覆盖 background-color 并用 !important 应用渐变背景。
直接用 background-size: cover，别碰 100% 100% —— 后者就是主动拉伸变形，不是 bug，是你写的。
为什么 background-size: 100% 100% 一定拉伸
它强制把图片宽高分别拉满容器宽高，完全不管原始比例。人像变胖、横幅压扁、文字糊成色块，都是预期行为。真正要“不拉伸又铺满”，只能靠 cover：等比缩放 + 裁剪，确保至少一边撑满容器。
-
cover必须配合background-position: center center，否则裁剪点飘忽，小屏下标题或人脸大概率被切掉 -
background-repeat: no-repeat要显式写，某些系统 DPI 缩放（如 Windows 125%）会意外触发平铺 - 只写
cover不设高度？等于没写——容器若无明确高度，cover会退化为按原始尺寸渲染，一缩放就露馅
响应式渐变背景必须有可测量高度
Bootstrap 的 .container、.row 默认靠内容撑高，background-image 和 linear-gradient() 都需要一个具体数值才能计算缩放和渐变分布。你看到的“渐变被压扁”或“只显示顶部一条色带”，大概率是容器高度为 auto 或 0px。
- 给背景容器加
min-height: 100vh，不是height: 100vh—— 防内容超长时底部被截 - 更优解：
min-height: 100vh; height: 100dvh，100dvh能响应 iOS Safari 地址栏收起/弹出，但需min-height降级兜底 - 别用
h-100工具类替代 —— 它只在父容器已有高度时生效，而html和body默认不占满视口
渐变按钮和渐变背景的坑不一样
按钮上直接加 bg-gradient-primary 无效，是因为 .btn 用 !important 锁死了 background-color，bg-gradient 的 background-image 根本插不进去。但普通容器（如 div、.hero-bg）没这层锁，cover + linear-gradient() 可以直接生效。
- 对按钮：必须手动覆盖，例如
background-color: transparent !important; background-image: linear-gradient(...) !important - 对容器：直接写
background: linear-gradient(135deg, #0d6efd, #6f42c1); background-size: cover;即可，无需!important - 别把渐变背景塞进
.container或.row里 —— 它们自带padding和max-width，会导致“看似全屏实则左右留白”
移动端缩放时渐变突然错位或留白
这不是代码写错了，是浏览器在缩放、地址栏显隐、DPI 变化时重新计算 vh 值导致的。尤其 iOS Safari，地址栏收起瞬间 100vh 可能多出几十像素，造成顶部空白或底部裁切。
- 结构上抽离独立 wrapper：
<div class="hero-bg"><div class="container">...</div></div>，样式只作用于.hero-bg - 避免
background-attachment: fixed—— iOS 上支持极不稳定，滚动卡顿、定位漂移、缩放错位三连击 - 真机调试时打开 DevTools Network 面板，确认渐变图或 base64 数据是否 404 —— 加载失败时，
cover再精准也只剩 fallback 色块
最难的其实不是写对 cover，而是同一组渐变值在不同设备、不同缩放比例、不同环境光下，文字对比度可能刚好够读，也可能立刻变得模糊难辨。别信肉眼判断，上线前用 WCAG 对比度检测工具扫一遍。
