如何去除<track>标签字幕的默认黑色背景

你遇到的问题是浏览器对<track>字幕的默认样式差异导致的，仅设置background-color: transparent可能无法覆盖所有浏览器的默认规则，试试以下几种方案：

方案一：优化标准选择器的背景写法 #

替换你现有的CSS为：

video::cue {
  background: transparent;
  /* 可选：添加文字阴影，保证字幕在亮背景上的可读性 */
  text-shadow: 0 0 3px #000, 0 0 5px #000;
}

如果transparent不生效，改用RGBA全透明值：

video::cue {
  background: rgba(0, 0, 0, 0);
}

方案二：使用通配符选择器覆盖所有字幕元素 #

部分浏览器需要更具体的选择器才能命中字幕样式：

video::cue(*) {
  background-color: transparent;
}

方案三：针对Safari的特殊处理 #

Safari在部分版本中对::cue的样式解析有差异，可尝试添加WebKit前缀的选择器：

video::-webkit-media-text-track-display {
  background-color: transparent;
}
video::-webkit-media-text-track-container {
  background-color: transparent;
}

额外注意事项 #

• 确保你的<track>标签kind属性设置为subtitles（而非captions），后者默认可能包含更多背景样式；
• 检查CSS是否存在优先级问题，若有其他样式覆盖了::cue的设置，可临时添加!important测试（不建议长期使用）：

video::cue {
  background-color: transparent !important;
}

内容的提问来源于stack exchange，提问作者scubaM