backdrop-filter不能直接用于video伪元素::backdrop，它仅在全屏时作用于视频UI；实现色彩遮罩需用absolute定位的透明div覆盖video，设rgba背景与backdrop-filter（如hue-rotate），并注意全屏z-index、浏览器支持及性能优化。
backdrop-filter 不能用于 video 元素的伪元素
直接给 video 写 ::backdrop 不生效——这个伪元素只作用于全屏状态下的 <video> 元素自身（比如控制栏、播放器 UI），不是用来盖遮罩的。很多人搜“video backdrop filter”就是卡在这儿：误以为 ::backdrop 是个通用背景层，其实它和 ::before 完全不是一回事。
真正能叠加色彩遮罩的，是 backdrop-filter 配合一个覆盖在视频上的透明容器，且该容器需满足两个条件：开启 backdrop-filter、背后有模糊/半透区域露出视频内容。
用 position: absolute + background + backdrop-filter 实现色彩遮罩
核心思路是：把一层 <div> 盖在 video 上，设为半透明，再用 backdrop-filter: hue-rotate(90deg) brightness(0.8) 让它“调色”背后的视频画面。注意，backdrop-filter 不会改变自身颜色，而是影响它「后面」的内容透过它时的视觉效果。
- 必须给遮罩层设
background: rgba(0,0,0,0.3)（不能全透明，否则滤镜无作用） - 必须设
backdrop-filter，且值里至少含一个色彩类函数，如hue-rotate()、saturate()、brightness() - 遮罩层和
video必须同级或父容器设position: relative，确保定位准确 - Chrome / Edge 111+、Safari 16.4+ 支持；Firefox 默认禁用
backdrop-filter，需用户手动开启layout.css.backdrop-filter.enabled
<div class="video-container"> <video src="demo.mp4" autoplay muted></video> <div class="color-overlay"></div> </div>
.video-container {
position: relative;
width: 100vw;
height: 100vh;
}
.video-container video {
width: 100%;
height: 100%;
object-fit: cover;
}
.color-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 0, 100, 0.15);
backdrop-filter: hue-rotate(-30deg) saturate(1.4);
pointer-events: none;
}
全屏时遮罩失效？检查 document.fullscreenElement 和 z-index
进入全屏后，浏览器可能将 video 提升到顶层渲染层（尤其 Safari），导致你的遮罩层被压在下面。这不是 bug，是全屏 API 的默认行为。
立即学习“前端免费学习笔记（深入）”；
- 监听
fullscreenchange事件，在进入全屏后给遮罩层加z-index: 2147483647（最大安全值） - 避免用
!important强行提权，优先靠层级结构解决：让遮罩和video同属一个position: fixed容器 - 某些安卓 WebView 不支持
backdrop-filter在全屏下工作，可降级为纯background叠加（牺牲动态调色能力）
性能敏感点：backdrop-filter 在 video 上开销极大
视频每帧都在变，而 backdrop-filter 要实时对背后区域做像素级运算。低端设备上容易掉帧、发热、触发页面强制重绘。
- 慎用
blur(10px)—— 即便没写，只要用了backdrop-filter，浏览器就可能启用硬件加速路径，功耗翻倍 - 优先用轻量操作：单个
hue-rotate()或brightness()比组合多个函数更稳 - 移动端建议加媒体查询，
@media (prefers-reduced-motion: reduce)下直接关掉滤镜 - 别在
video外层套transform: scale(1.001)来“强制重绘”，这反而引发更多合成层
最常被忽略的是：遮罩层的 background 透明度必须足够高（≥0.1），太低会导致滤镜计算结果不可见；但又不能太高，否则盖住视频细节。这个平衡点得实测，没有通用值。
