chrome/firefox 支持 background-color，safari 忽略 background: linear-gradient() 且不支持 background-image 和 border-radius；::cue 背景仅限扁平色块，需拆解 background 属性并用 track[srclang] 实现多语言差异化。

video::cue 背景样式在 Chrome/Firefox/Safari 中的实际表现差异

Chrome 和 Firefox 对 background-color 支持稳定，但 background: linear-gradient() 在 Safari 中完全被忽略；所有浏览器都不支持 background-image 或 border-radius 作用于 ::cue。这不是写法问题，而是渲染层限制——::cue 的背景始终是扁平色块，且仅通过合成层绘制，无法触发 CSS 渲染管线中的高级特性。

为什么 background-color 生效但 background 不生效？

background 是复合属性，浏览器解析时会尝试展开为 background-image、background-color 等子项。一旦其中任一子项不被支持（如 background-image），整个声明可能被静默丢弃。实操中必须拆开写：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ✅ 正确：video::cue { background-color: rgba(0, 0, 0, 0.75); }
• ❌ 无效：video::cue { background: rgba(0, 0, 0, 0.75) url("none"); }（哪怕 url 是占位符）
• ⚠️ Safari 特别严格：即使写 background: #000，若未显式指定 background-color，部分 iOS 版本会 fallback 到默认透明背景

移动端 Safari 字幕背景的两个隐藏坑

iOS Safari（截至 16.4+）对 ::cue 背景的支持仍不稳定，尤其在首次加载或字体未就绪时：

• 字体加载延迟会导致字幕先以无背景方式渲染 1–2 帧，再突然叠加背景——视觉上像“闪一下”
• 使用 rgba() 时，alpha 值低于 0.6 在 Retina 屏上易出现半透明边缘模糊，建议用 0.7 起步
• 兜底方案：加一行 video::cue { background-color: #000; } 作为 Safari 基础色，再用 @supports (background-color: rgba(0,0,0,0.7)) 包裹增强版本

多语言字幕背景差异化设置的可行路径

不能靠 ::cue[lang="zh"]（伪元素不支持属性选择器），但可通过 track[srclang="zh"]::cue 实现语言级背景控制：

• ✅ 可行：track[srclang="zh"]::cue { background-color: #2c3e50; }
• ✅ 可行：track[srclang="en"]::cue { background-color: #1a237e; }
• ⚠️ 注意：srclang 必须与 WebVTT 文件首行的 LANGUAGE: zh 或 cue 行中的 lang:zh 一致，否则匹配失败
• ❌ 无效：video::cue[lang="zh"] 或 ::cue(lang="zh") —— 这些语法根本不存在于规范中

真正难的不是写样式，而是让每条字幕 cue 都落在浏览器愿意渲染的“安全区”里：WebVTT 格式正确、track.readyState === 2、kind 拼写准确、MIME 类型返回 text/vtt——这些前置条件没满足，::cue 再多兼容写法也白搭。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！