css - 带有背景滤镜模糊的比较滑块不起作用

Question

我想在 Three.JS 中与 360 度场景中的模糊区域进行滑块比较

目前，我有一个适用于 ThreeJS 场景的比较滑块。我每次比较两个模糊区域，代表两种眼镜。我使用背景过滤器来管理这个模糊和剪辑路径来做比较滑块。

backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

&&

backdrop-filter: blur(80px);
-webkit-backdrop-filter: blur(80px);

您可以在此处查看我的代码（如果您只想查看模糊区域，请删除背景颜色）：https ://codepen.io/guicolombel/pen/oNNgxNP

我希望滑块比较适用于模糊区域。无法放置背景图像或 img，我很难看到另一种方法。

先感谢您！

标签： csssvgclip-path