::backdrop仅在元素真正全屏时生效，且仅支持video/iframe等触发元素的背景色、背景图等有限属性，Safari完全不支持，需用fullscreenchange事件+body类模拟兼容。
::backdrop 确实能改全屏视频的背景，但只在真正进入全屏（document.fullscreenElement 存在）时生效，且仅作用于 <video>、<iframe> 等触发全屏的元素自身——它不控制整个屏幕背景，也不影响页面其他部分。
为什么 ::backdrop 没反应？常见失效原因
最常踩的坑是误以为只要写上样式就自动生效。实际上：
- 必须等元素真正进入全屏后，
::backdrop才被浏览器渲染（比如调用video.requestFullscreen()成功后） - Chrome/Edge 从 120+ 起要求全屏请求由用户手势触发（如
click），否则静默失败，::backdrop根本不会挂载 - Firefox 对
::backdrop支持较弱：它只支持<video>全屏，且不支持background-image，仅接受纯色或渐变 - Safari 完全不支持
::backdrop（截至 Safari 17.6）
正确写法：选择器 + 属性限制很明确
必须用具体元素选择器限定，不能只写 ::backdrop；且仅允许使用少数背景相关属性：
- 只支持：
background-color、background（简写）、background-image（Chrome/Edge）、opacity、filter - 不支持：
border、padding、transform、z-index等布局类属性 - 推荐写法：
video::backdrop { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); }
替代方案：当 ::backdrop 不可用时怎么办？
面对 Safari 或旧版浏览器，得绕开伪元素：
立即学习“前端免费学习笔记（深入）”；
- 监听
fullscreenchange事件，在进入全屏时给<body>加 class，用覆盖层模拟背景：document.addEventListener('fullscreenchange', () => { document.body.classList.toggle('fs-active', !!document.fullscreenElement); });配合 CSS：body.fs-active::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 9999; pointer-events: none; } - 注意：该覆盖层需设
pointer-events: none，否则会拦截视频控件点击 - 若需模糊效果，
backdrop-filter在 Safari 全屏下仍受限，此时只能用filter: blur()+ 单独<div>截图式模糊（性能差，慎用）
真正麻烦的不是怎么写样式，而是全屏状态的不可预测性——不同浏览器对“谁触发了全屏”“是否允许样式介入”的判断逻辑差异很大，建议始终用 document.fullscreenElement 做运行时检测，而不是只依赖 CSS。
