HTML CSS：父元素加滤镜后，如何移除子元素的滤镜效果？

我给父元素设置了自定义SVG滤镜，尝试给子元素添加filter:none来取消滤镜效果，但完全没有作用。以下是复现问题的代码：

HTML代码 #

<body>
    <div class="container filter">
        <div class="nofilter">
            <p>hello</p>
        </div>
        <div class="nofilter">
            <p>hello</p>
        </div>
        <div class="nofilter">
            <p>hello</p>
        </div>
        <div class="nofilter">
            <p>hello</p>
        </div>
    </div>  
    
    <svg> 
        <defs>
        <filter id="goo">
            <fegaussianblur in="sourcegraphic" stddeviation="10"/>
            <fecolormatrix in="name" mode="matrix"
                           values ="1 0 0 0 0
                                    0 1 0 0 0
                                    0 0 1 0 0
                                    0 0 0 30 -15" />
            <feblend in="sourcegraphic" />
        </filter>
        </defs>
    </svg>
</body> 

CSS代码 #

body {
    height: 100%;
    width: 100%;
}

.container, .filter {
    width: 50%;
    height: 200%;
    background-color: green;
    filter: url(#goo);
    color: white;
    font-size: 100px;
}

.nofilter {
    width: 50%;
    height: 50%;
    margin: auto auto;
    background-color: aqua;
    filter: none;
    color: black;
    font-size: 50px;
    text-align: center;
}

问题原因 #

当父元素设置filter属性时，浏览器会创建一个新的渲染上下文：它会先渲染父元素及其所有子元素的完整内容，再将滤镜应用到这个整体渲染结果上。子元素的filter:none是在父元素渲染完成后生效，根本无法改变已经被父元素滤镜处理过的最终效果。

可行解决方案 #

方案1：用伪元素承载滤镜（推荐） #

把父元素的背景色和滤镜效果转移到伪元素上，伪元素设置为绝对定位并置于子元素下方，这样子元素就不会被滤镜影响，DOM结构也不需要改动。

修改后的CSS代码：

body {
    height: 100vh;
    width: 100%;
    margin: 0;
}

.container {
    width: 50%;
    height: 200vh;
    position: relative; /* 为伪元素提供定位基准 */
    color: white;
    font-size: 100px;
}

/* 伪元素承载背景和滤镜 */
.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: green;
    filter: url(#goo);
    z-index: -1; /* 放到子元素下方，不遮挡内容 */
}

.nofilter {
    width: 50%;
    height: 50%;
    margin: auto auto;
    background-color: aqua;
    color: black;
    font-size: 50px;
    text-align: center;
    /* 不再需要filter:none */
}

方案2：将子元素移出父元素，用定位对齐 #

如果父元素仅需要滤镜作用于自身背景而非内容，可以把不需要滤镜的子元素移到父元素外部，通过绝对定位对齐到原位置。

修改后的HTML代码：

<body>
    <div class="container filter">
        <!-- 仅保留需要滤镜的内容 -->
    </div>

    <!-- 移出不需要滤镜的子元素 -->
    <div class="nofilter">
        <p>hello</p>
    </div>
    <div class="nofilter">
        <p>hello</p>
    </div>
    <div class="nofilter">
        <p>hello</p>
    </div>
    <div class="nofilter">
        <p>hello</p>
    </div>  
    
    <svg> 
        <defs>
        <filter id="goo">
            <fegaussianblur in="sourcegraphic" stddeviation="10"/>
            <fecolormatrix in="name" mode="matrix"
                           values ="1 0 0 0 0
                                    0 1 0 0 0
                                    0 0 1 0 0
                                    0 0 0 30 -15" />
            <feblend in="sourcegraphic" />
        </filter>
        </defs>
    </svg>
</body> 

修改后的CSS代码：

body {
    height: 100vh;
    width: 100%;
    margin: 0;
    position: relative; /* 为子元素提供定位基准 */
}

.container.filter {
    width: 50%;
    height: 200vh;
    background-color: green;
    filter: url(#goo);
    color: white;
    font-size: 100px;
}

.nofilter {
    width: 25%; /* 对应原父元素宽度的50% */
    height: 100vh; /* 对应原父元素高度的50% */
    position: absolute;
    top: 0;
    left: 12.5%; /* 居中对齐原父元素内的位置 */
    background-color: aqua;
    color: black;
    font-size: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 为每个子元素设置垂直位置，对应原布局 */
.nofilter:nth-child(2) { top: 100vh; }
.nofilter:nth-child(3) { top: 200vh; }
.nofilter:nth-child(4) { top: 300vh; }

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