HTML字幕背景透明度只能通过video::cue伪元素设置，因无DOM节点且VTT不解析CSS；直接写style或opacity无效，正确用rgba()并配合text-shadow提升可读性。
HTML 字幕标签本身不支持 background 或 opacity 属性，所谓“字幕背景透明度”必须通过 ::cue 伪元素控制，且仅对浏览器渲染出的字幕层生效——不是改 标签，也不是改 VTT 文件内容。
为什么直接给
VTT 文件是纯文本轨道描述， 标签只是资源挂载点，它没有 DOM 节点、不可选中、不能绑定 CSS 类。浏览器内部将字幕渲染为一个独立的、不可见的叠加层，样式入口只有 ::cue 及其变体。
- 写
完全无效 - 在 VTT 文件里加
background: #0008会被忽略（VTT 不解析 CSS） -
opacity作用于整个元素时，会连同视频画面一起变透明，不是只调字幕
video::cue 是唯一可控入口
所有现代浏览器（Chrome/Firefox/Safari/Edge）都支持该伪元素，它是专为字幕样式设计的标准接口。背景透明度必须在这里设，且推荐用 rgba() 而非 opacity，避免影响文字本身清晰度。
- 正确写法：
video::cue { background-color: rgba(0, 0, 0, 0.6); } - 错误写法：
video::cue { opacity: 0.6; }（文字也会发虚） - 若需圆角+内边距，可加：
video::cue { padding: 0.3em 0.6em; border-radius: 4px; }
多行字幕或角色区分时用 ::cue(.class)
VTT 文件中可用 class 提示标记语义类型，配合 CSS 实现差异化背景。这比全局 ::cue 更灵活，也避免覆盖旁白、音效等非对话类字幕。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- VTT 中写：
00:01:22.000 --> 00:01:25.000 class:dialog 这是主角台词 - CSS 中写：
video::cue(.dialog) { background-color: rgba(30, 30, 50, 0.75); } - 注意：class 名必须全小写、无空格、不带特殊字符，否则匹配失败
移动端和 Safari 的兼容细节
iOS Safari 对 ::cue 支持较晚（iOS 15.4+），旧版本会回退到默认黑底白字；部分安卓 WebView（如旧版 UC）可能完全忽略该伪元素。务必做降级处理：
- 始终保留 VTT 文件中的
line和align提示，确保基础位置可用 - 避免依赖
::cue-region——它在 Safari 中支持不稳定，慎用 - 测试时真机优先，模拟器可能掩盖渲染差异
真正容易被忽略的是：字幕背景透明度调整后，如果原视频画面本身有高对比区域（比如白底文字片段），仍可能造成可读性下降。建议搭配 text-shadow 做边缘强化，而不是一味降低背景透明度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
