我正在开发一个React Web应用程序，我正在实现的功能之一是在鼠标光标后面有一个“blob”。这个斑点是模糊的，通过放置另一个div在它上面，并使用backdrop-filter（我得到同心圆，如果我没有这样做）。这个很好用。但是，当我在blob对象上放置另一个div时，backdrop-filter似乎也模糊了其他所有内容。
下面是我的Blob的ReactJS代码：

import { useEffect } from "react";

const Blob = () => {
    useEffect(() => {
        const myBlob = document.getElementById("blob");

        if(myBlob) {
            document.body.onpointermove = event => {
                const {clientX, clientY} = event;
        
                myBlob.animate({
                    left: `${clientX - 150}px`,
                    top: `${clientY - 100}px`
                }, {duration: 3000, fill: "forwards"});
            }
        }
    }, [])
    
    
    
    return (
        <div>
            <div id="blob" className="blob"></div>
            <div id="blur" className="blur"></div>
        </div>
        
    );
}

export default Blob;

下面是我的ReactJS代码，用于页面的其余部分：

import Blob from "../atoms/trinkets/Blob";
const Home = () => {
    return (
        <div className="return-container">
            <Blob/>
            <div className="block"></div>
        </div>
    )
}

export default Home;

下面是我的CSS：

.blob {
    background: linear-gradient(to right, aquamarine, mediumpurple);
    height: 200px;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    animation: rotate360 20s infinite;
}

.blur {
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 2;
    backdrop-filter: blur(75px);
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.block {
    height: 500px;
    width: 500px;
    background-color: pink;
    z-index: 5;
}

无论我怎么尝试，#blur div都将背景滤镜置于其他所有滤镜之上。我检查了开发工具，看看所有的东西都被放置在哪里，并可以确认.block div出现在其他所有东西的顶部