最稳的透明背景写法是background-color: rgba()，它只让背景透出而文字清晰；opacity会使整个卡片及子元素一起变淡，不可取。
background-color: rgba() 是最稳的透明背景写法
直接用 opacity 会让卡片里所有内容（文字、图标、子元素）一起变淡，不是“透光”，是“整体发虚”。真正要的是背景透出、内容清晰——必须用 rgba() 或 hsla() 控制背景色本身带透明度。
-
background-color: rgba(255, 255, 255, 0.1)是玻璃卡片起步值，别用transparent：它没基底，后续backdrop-filter模糊会失效 - 深色背景上，
rgba(0, 0, 0, 0.08)比rgba(255, 255, 255, 0.1)更协调，避免灰蒙感 - alpha 值别低于 0.05：Chrome 和 Safari 在极低 alpha 下可能渲染为全透明，视觉断层
backdrop-filter: blur() 才是透光感的核心
没有 backdrop-filter，就只是半透明盒子，不是玻璃态。它只模糊卡片「背后」的内容，不碰卡片自身文字和图标，这才是透光感的来源。
- 必须配合
background-color: rgba()使用，纯transparent+blur()在 Safari 中常静默失效 - 数值建议控制在
blur(8px)–blur(12px)：iOS Safari 超过10px容易卡顿或降级；桌面端可稍高，但 >16px 后边际收益极低 - 务必加
-webkit-backdrop-filter: blur(10px)：Safari 15.4 之前完全不认无前缀版本 - 如果模糊不出现，先检查父容器是否设了
overflow: hidden或transform——它们会切断 backdrop 的背景穿透链
文字看不清？不是透明度问题，是 contrast 崩了
模糊+低饱和背景天然吃对比度，文字发灰不是代码错了，是视觉系统被削弱了。重点调 color 和局部阴影，不是拉高 alpha。
- 优先改
color：用color: hsl(0, 0%, 92%)比white更稳，暗背景下不刺眼，亮背景下不发灰 - 慎用
text-shadow：全向模糊阴影（如0 0 4px rgba(0,0,0,0.2)）会被backdrop-filter二次模糊，更糊；单侧浅阴影（0 1px 1px rgba(0,0,0,0.1)）更可控 - 图标用
filter: drop-shadow()替代box-shadow：前者绕过 backdrop 模糊，后者会被一并柔化掉
滚动容器里 backdrop 失效？stacking context 是元凶
把玻璃卡片塞进 overflow-y: auto 的 div，blur 突然消失——这不是 bug，是规范行为：backdrop-filter 只对「同 stacking context 中的真实背景」生效。一旦父容器创建新层（比如加了 transform、will-change 或 overflow），卡片背后只剩空白。
立即学习“前端免费学习笔记（深入）”；
- 最简解法：把滚动逻辑上移到
body或 layout wrapper，让卡片始终“看到”页面真实背景 - 必须局部滚动时，放弃
overflow，改用clip-path+position: sticky模拟可视区裁切 - 绝对不要给玻璃卡片自己加
transform（哪怕只是translateZ(0)），它会主动创建新 stacking context，自断后路
