全屏背景渐变需设html和body高度为100%并清除margin；目标容器用min-height:100vh；Bootstrap渐变类须加background-size:cover和center；Safari下需GPU加速防闪烁；图文叠加推荐分层结构而非双背景。
全屏背景渐变必须设 html 和 body 高度为 100%
不设这个，.container 或任何子元素加 height: 100% 都没用——它只会按父容器“内容高度”撑开，而默认 html 和 body 高度是 auto。
实操建议：
- 在全局 CSS 中加：
html, body { height: 100%; margin: 0; } - 再给目标容器（比如
<div class="hero">）加height: 100vh或min-height: 100vh，推荐后者，避免内容超长时被截断 - 别只信
height: 100%，它依赖父级有明确高度，而浏览器初始渲染下body没有
Bootstrap 5.3 的 bg-gradient 类不能直接全屏生效
Bootstrap 自带的 bg-gradient-primary 这类工具类，本质是 background-image: linear-gradient(...)，但它默认不控制背景尺寸、位置和重复行为，容易出现平铺、偏移或只覆盖局部。
实操建议：
- 必须手动补上
background-size: cover和background-position: center - 加
bg-dark bg-gradient只会叠加深灰底色 + 渐变图层，但若底色太亮，渐变可能看不清 - 更稳妥的做法：不用工具类，自定义类，例如：
.full-grad { background: linear-gradient(135deg, #4b6584, #00a8cc); background-size: cover; background-position: center; }
移动端 Safari 下 linear-gradient 偶尔失效或闪烁
尤其在配合 position: fixed 或滚动监听时，iOS WebKit 有时会把渐变当“非硬件加速层”，导致重绘异常，表现为闪白、卡顿或渐变消失。
实操建议：
- 强制开启 GPU 加速：
transform: translateZ(0)或will-change: background - 避免在
:active状态里动态切换渐变（比如按钮点击时），这正是你提到“单击时背景闪烁”的根源——Bootstrap 的.active类会触发重绘，而 Safari 对渐变重绘支持不稳定 - 如需交互反馈，改用 opacity 变化或伪元素遮罩，别动
background-image
想让渐变盖住背景图？顺序和透明度得算清楚
很多人想实现“图片底 + 渐变叠层 + 文字清晰”，结果文字发灰或图片透出太多。关键不是堆 class，而是图层叠加逻辑。
实操建议：
- 不要用
background-image: url(...) linear-gradient(...)双值写法——虽然合法，但旧版 Android 和部分邮件客户端不认 - 推荐结构：
<div class="bg-img"><div class="grad-overlay"><h1>文案</h1></div></div>，然后分别控制.bg-img和.grad-overlay -
.grad-overlay用background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7))，透明度值别超过0.8，否则文字可读性骤降
