标签无法实现毛玻璃效果，因其不生成真实DOM元素，仅支持受限的::cue伪元素样式，且backdrop-filter不被支持。
直接给 <track></track> 或字幕容器加 filter: blur() 会糊掉文字本身，不是毛玻璃；真要背景虚化，得用 backdrop-filter，但前提是字幕层必须有半透明背景 + 真实可被模糊的底层内容（比如视频画面）。
为什么 <track></track> 标签自身无法直接实现毛玻璃
<track></track> 是 HTML5 视频字幕的标准标签，但它不渲染为真实 DOM 元素，浏览器内部用原生控件绘制字幕，开发者无法对其添加 backdrop-filter 或自定义背景。所有样式控制都受限于 ::cue 伪元素，而 ::cue 不支持 backdrop-filter（Chrome/Firefox 均不识别），filter: blur() 也只作用于字幕文本自身，导致字变糊、背景不变。
- 常见错误：写
::cue { background: rgba(0,0,0,0.5); filter: blur(4px); }→ 文字边缘发虚，背景仍是纯色，毫无“透过玻璃看画面”的效果 -
::cue支持的样式极少：仅color、background、font、text-shadow等基础属性，不支持滤镜、圆角、边框等视觉增强 - 即使强行用 JS 动态插入 DOM 字幕层，若未正确设置层级和透明度，
backdrop-filter仍会静默失效
用自定义字幕层 + backdrop-filter 实现真毛玻璃
绕过 <track></track> 的限制，监听 video 的 timeupdate 事件，用 <div> 模拟字幕，并确保它覆盖在视频上方、背景半透、背后是真实视频帧。
<ul><li>HTML 结构必须满足：视频容器设 <code>position: relative，字幕 <div class="subtitle"> 设 <code>position: absolute 并置于顶层（z-index: 10）
background-color: rgba(0, 0, 0, 0.2)（不能是 transparent 或纯黑）、backdrop-filter: blur(6px)、-webkit-backdrop-filter: blur(6px)
<div>）不能有 <code>overflow: hidden 或 border-radius 同时存在，否则 Safari 会跳过模糊合成
blur(4px)–blur(8px)：字幕区域小，blur(6px) 在多数设备上兼顾通透感与文字锐度
@supports 检测和降级方案必须写对
写了 backdrop-filter 却没效果？大概率是检测逻辑或 fallback 写错了。Firefox 默认禁用该特性，iOS 微信 X5 内核完全不支持，Safari 旧版可能因系统设置“减少透明度”而关闭渲染。
立即学习“前端免费学习笔记（深入）”；
- 正确检测写法：
@supports (backdrop-filter: blur(1px)) and (-webkit-backdrop-filter: blur(1px))—— 必须双条件并列，单写任一条件都会放行不兼容环境 - 降级时别用
background: rgba(0,0,0,0.7)，太浓会遮住视频；建议rgba(0,0,0,0.4)+box-shadow: 0 0 8px rgba(0,0,0,0.2)模拟微光质感 - 不要在字幕层上同时加
filter: blur()和backdrop-filter，部分安卓 WebView 会卡死或渲染异常 - 性能敏感：字幕频繁更新时，避免在
requestAnimationFrame中反复重设backdrop-filter值，固定写死即可
最易被忽略的一点：字幕层的 background-color alpha 值不能低于 0.1，否则 Safari 会认为“无背景可模糊”，直接跳过整个 backdrop 渲染链——看着像没写样式，其实是静默失败。
