::backdrop用于全屏模式下设置背景样式，如视频全屏时添加遮罩；::cue用于自定义WebVTT字幕外观，支持字体、颜色及特效；两者均需注意浏览器兼容性并提供降级方案。
在现代网页开发中，CSS伪元素不仅用于装饰和布局，还能在特定交互场景中提升用户体验。其中 ::backdrop 与 ::cue 是两个功能独特但使用场景较为专一的伪元素，分别作用于全屏模式背景和媒体字幕样式控制。下面详细介绍它们的实际应用场景与用法。
::backdrop：控制全屏元素背后的显示效果
::backdrop 伪元素出现在元素进入全屏模式（通过 Fullscreen API）时，用于设置该元素背后其余页面区域的样式。它不会影响全屏元素本身，而是作用于被遮挡的背景层。
常见用途包括：
- 在视频全屏播放时，为页面背景添加半透明遮罩，避免用户分心
- 在弹出式全屏菜单或演示文稿中统一视觉层次
- 增强可访问性，通过降低背景亮度突出全屏内容
示例代码：
立即学习“前端免费学习笔记（深入）”；
video::backdrop {background-color: rgba(0, 0, 0, 0.8);
cursor: pointer;
}
当视频进入全屏后，页面其他部分会呈现深色半透明背景，点击该区域可退出全屏（需配合 JavaScript 实现逻辑）。
::cue：精准控制 WebVTT 字幕样式
::cue 伪元素用于自定义嵌入视频中的 WebVTT 字幕外观。它允许开发者对字幕文本进行样式设计，而不影响视频控件或其他页面内容。
适用于：
- 为不同语言字幕设置颜色或字体区分
- 提高字幕可读性，例如添加文字阴影或背景框
- 匹配品牌风格，使字幕与网站整体设计一致
支持选择特定标签或类别的 cue：
video::cue {color: yellow;
background-color: rgba(0, 0, 0, 0.5);
font-size: 1.2em;
}
video::cue(.highlight) {
font-weight: bold;
text-shadow: 2px 2px 4px #000;
}
上述样式将作用于所有字幕行，而带有 .highlight 类的字幕会额外加粗并添加阴影效果。
兼容性与使用建议
这两个伪元素目前在主流浏览器中支持有限，需注意实际环境：
- ::backdrop 在 Chrome、Edge 和 Safari 中支持良好，Firefox 需要前缀或不完全支持
- ::cue 基本被 Chromium 内核浏览器支持，Safari 支持较弱
- 生产环境中应进行特性检测，并提供降级方案
建议结合 JavaScript 检测全屏状态变化，动态调整界面行为；同时准备默认字幕样式以防 ::cue 不生效。
基本上就这些。::backdrop 和 ::cue 虽然应用范围窄，但在构建专业级媒体体验时非常实用，合理使用能显著提升细节表现力。
