移动端不透明渐变背景需同时用rgba()设背景色透明度与background-image: linear-gradient()叠加，缺一不可；iOS Safari渲染严格，须避免简写、确保色标无逗号、显式重置文字/边框色。
移动端设置不透明的渐变背景，关键不是“加 opacity”，而是用 rgba() 控制背景色透明度 + background-image: linear-gradient() 叠加渐变——两者必须共存且互不干扰，否则 iOS Safari 会渲染异常或文字对比度崩坏。
为什么直接加 bg-gradient 在手机上看起来像纯色
因为 Bootstrap 的 bg-gradient 类只注入 background-image，而默认搭配的 bg-primary 等类带的是不透明 background-color（如 #0d6efd）。在小屏下，如果容器没内容撑高、或被 overflow: hidden 截断，渐变图像根本没空间渲染；更常见的是，iOS Safari 对 background-image 和 background-color 的层叠渲染比桌面端更“实”，导致渐变被底色完全盖住。
- 检查 computed styles：确认
background-image不是none，且background-color的 alpha 值不是1 - 别依赖
min-height: 100vh—— 移动端 viewport 高度常因地址栏缩放跳变，改用min-height: 100dvh（支持 Safari 16.4+）或 JS 补偿 -
bg-gradient必须和bg-*类同级写，顺序无关，但缺一不可；单独写bg-gradient在任何设备都无效
移动端安全的不透明渐变写法（推荐手写 CSS）
Bootstrap 5 的预设渐变类不支持自定义透明度，也不响应断点。真要控制不透明度，得绕过工具类，直接操作 background-image 和 background-color：
- 用
background-image: linear-gradient(135deg, rgba(13,110,253,0.8), rgba(111,66,193,0.9))—— 每个色标都带 alpha，iOS Safari 兼容性稳 - 禁用
background简写：它会清掉background-color，导致按钮:disabled状态变白，文字瞬间不可读 - 加
!important：Bootstrap 的.bg-*类带!important，你的渐变声明权重必须更高才能覆盖 - 保底
background-color: rgba(255,255,255,0.05)：极淡底色提升文字可读性，又不破坏渐变感
文字和边框在渐变上经常“消失”的原因
原生 Bootstrap 的文本色（如 .text-dark 是 #212529）和边框色（.border 是 #dee2e6）全按纯色背景设计。换成浅色渐变后，对比度常低于 WCAG 4.5:1 标准，阳光下几乎看不见。
- 浅渐变配深字：加
text-dark或手动color: #212529 - 深渐变配浅字：加
text-white或color: rgba(255,255,255,0.95) - 必加一道实色边框：
border: 1px solid rgba(0,0,0,0.1)，避免边缘“融”进背景 - 别信“自动适配”：
text-body这类语义类在渐变背景下照样失效，必须显式重置
最易被忽略的一点：移动端 Safari 对 linear-gradient 的 color-stop 解析极严格，写 50%, #000 会被整条丢弃，必须写成 50% #000（空格分隔，无逗号）——这个细节在桌面 Chrome 里能蒙混过关，但在 iOS 上直接白屏。
