backdrop-filter: revert-layer 如何工作？自定义光标实践疑问

先搞懂 revert-layer 本身的作用 #

revert-layer 是专门配合 CSS 层级（@layer）使用的恢复值，核心逻辑很明确：把当前属性的样式，恢复到当前层级之前的层级里定义的样式，它只认你用@layer划分的层级顺序，和浏览器默认样式、继承样式都无关。

比如你代码里写了@layer base, special，层级优先级是 special 高于 base——也就是说special层的样式会覆盖base层的。这时候如果在special层里给某个属性用revert-layer，就会直接忽略当前special层的该属性设置，回到base层的定义。

再看 backdrop-filter: revert-layer 的具体工作方式 #

backdrop-filter 是给元素背后的内容添加滤镜效果的属性，而backdrop-filter: revert-layer的作用仅仅是：取消当前层级中给 backdrop-filter 设置的所有滤镜，恢复到当前层级之前的层级里定义的 backdrop-filter 样式。

划重点：它只对 backdrop-filter 这个属性本身生效，完全不会影响其他CSS属性（比如你要修改的文本color）。这也是你的代码没实现预期效果的核心原因——你想用它改光标下的文本颜色，但它根本管不到文本样式，只负责滤镜的重置。

结合你的代码说清误区 #

你的需求是让自定义光标覆盖的文本从blue（special层的body颜色）变回red（base层的body颜色），但backdrop-filter做不到这个。如果要让某个元素的color回到base层的样式，应该给那个元素用color: revert-layer，而不是给cursor加backdrop-filter: revert-layer——cursor的backdrop-filter只影响它背后内容的滤镜效果，和文本颜色没有关系。

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