在CSS中是否有混合:焦点-内部和:而不是伪-clases来创建模糊效果？

Question

当焦点在文本区域(形式)时，我想要身体，除了那个形式模糊。

React &尾风代码：

<div className="sub-main-container">

<another component/>
<another component/>
<another component/>

<article id="form-message" className="contact-form container mx-auto text-white flex flex-col justify-center items-center m-4">
      <h3 className="font-bold text-3xl">Thanks for your visit!</h3>

      <form className="bg-white mx-6 w-full flex flex-col mt-2">
        <textarea
          id="textarea-form-message"
          className="p-2 text-black"
          placeholder="Let me your message! "
        />
        <button className="font-bold text-white bg-[#63b8ea] px-5 rounded-b-sm">
          Send me the messagge!
        </button>
      </form>
    </article>

<div>

Css代码：

.sub-main-container:focus-within:not(#form-message) {
    filter: blur(0.5rem);
}

我使用伪类:焦点-内部模糊容器和伪类:not()来避免该表单，但是整个页面都变得模糊了。

知道发生了什么事吗？

Answer 1

可悲的是，不是你希望的那样简单。

模糊过滤器适用于后代，不能对窗体本身进行反转。

一种选择可能是使用背景滤波器，尽管并不是每个浏览器都支持它。