标签无法设置透明度，因其仅为提供字幕数据的元信息容器，不进入DOM、不可样式化；真正可调透明度的是手动编写的字幕层（如）或通过::cue伪元素控制原生字幕样式。
HTML 里没有专门的“字幕标签”， 常见错误是写： 当必须用原生 立即学习“前端免费学习笔记（深入）”； 把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。<track></track> 是唯一语义化字幕容器，但它不渲染、不可样式化；真正要调透明度的是你手写的字幕层（比如 <div class="subtitle">），必须用 CSS 控制。<h3>为什么 <code><track></track> 标签没法设透明度
<track></track> 只是向 <video></video> 提供字幕数据的元信息标签，浏览器内部渲染字幕时完全绕过 DOM，也不暴露可选样式接口。你在开发者工具里根本找不到它对应的元素节点，opacity、rgba() 全无效。track { opacity: 0.7; }——这行代码压根不会生效，连警告都不会报。<div class="video-subtitle">
<li>如果用 WebVTT 文件配 <code><track></track>，样式只能靠 ::cue 伪元素（且仅限部分属性）::cue 支持 color、background-color、opacity 等，但不支持 border、transform 或自定义字体加载
::cue 设置字幕背景透明度的正确写法<track></track> 时，::cue 是唯一可控入口。它的 background-color 必须用 rgba()，不能只靠 opacity，否则整个字幕块（含文字）一起变淡。
video::cue {
color: white;
background-color: rgba(0, 0, 0, 0.6); /* 黑底 60% 不透明，文字保持 100% 清晰 */
font-size: 1.2rem;
padding: 0.4em 0.6em;
}
rgba(0, 0, 0, 0.6) 中的 0.6 是“不透明度”，值越小背景越透、越接近原视频画面background-color: #000; opacity: 0.6——这会让白色文字也变灰发虚::cue 的 rgba() 支持不稳定，可加备用色：background-color: #000; background-color: rgba(0, 0, 0, 0.6);
手动字幕层（
<div>）怎么避免文字模糊<p>自己写的字幕层最灵活，但也最容易踩坑：直接给容器设 <code>opacity 会导致文字边缘发虚、可读性暴跌。
- 正确做法：用
background-color: rgba(0, 0, 0, 0.7)+color: white分开控制 - 若需 hover 时渐变透明，必须用伪元素：
.subtitle::before承载背景，再单独设opacity - 定位用
position: absolute配bottom: 1em，别依赖margin，否则在不同分辨率下偏移不一致 - 加
backdrop-filter: blur(2px)做毛玻璃效果时，务必测试 iOS Safari —— 它对该属性渲染延迟明显
遮罩层和字幕共存时的层级陷阱
视频页面常同时有：背景图/视频 + 半透遮罩层 + 字幕层。z-index 冲突会导致字幕被遮罩盖住，或遮罩反被字幕穿透。
- 标准结构应为：
<div class="video-container">（relative）→ <code><video></video>（absolute, z-index: 1）→<div class="overlay">（absolute, z-index: 2）→ <code><div class="subtitle">（absolute, z-index: 3）<li>漏设 <code>position: relative在容器上，所有absolute子元素会相对于 body 定位，布局立刻错乱 - 用
pointer-events: none给遮罩层，避免它拦截字幕区域的点击事件（比如字幕上有按钮）
真正难的不是写对一行 rgba()，而是当遮罩、字幕、按钮、SVG 图标堆叠在一起时，每个 layer 的 position、z-index、pointer-events 和透明度来源都得独立校验——浏览器不会报错，但用户一眼就能看出哪层“没透对”。
