模糊整个页面，除了 div

Question

我有以下代码。

除了中间的红色 div 之外，我需要将其全部模糊。

我试过使用 filter:none 或 filter:blur(0) 但那不起作用。我怎样才能模糊背景中除了红色以外的所有内容div？

编辑：我也尝试将它与 z-index 一起使用，但也不起作用。

.container{
  width:100%;
  height:100%;
  min-height:400px;
  position:relative;
  filter: blur(0.5rem);
  z-index:1;
}
.text{
  width:50%;
}
.center{
  width:200px;
  height:200px;
  position:absolute;
  top: 50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:#f00;
  z-index:10;
  filter: blur(0);
  filter: none;
}

<div class="container">
    <div class="title">
      <h1>
        some text
      </h1>
    </div>
    <div class="text">
      <p>
        some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred...
      </p>
    </div>
    <div class="center"></div>
</div>

Answer 1

尝试仅向内部元素而不是父元素（“容器”class）添加模糊效果。 CSS 以下必须有效：

.container {
    width: 100%;
    height: 100%;
    min-height: 400px;
    position: relative;
  }
  .title {
    filter: blur(8px);
    -webkit-filter: blur(8px);
  }
  .text {
    width: 50%;
    filter: blur(8px);
    -webkit-filter: blur(8px);
  }
  .center {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f00;
  }

Answer 2

您应该为此使用 not。

如果你使用 .container div:not(.center) 你的问题应该可以解决。

.container div:not(.center){
  width:100%;
  height:100%;
  min-height:400px;
  position:relative;
  filter: blur(0.5rem);
  z-index:1;
}
.text{
  width:50%;
}
.center{
  width:200px;
  height:200px;
  position:absolute;
  top: 50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:#f00;
  z-index:10;
  filter: blur(0);
  filter: none;
}

<div class="container">
    <div class="title">
      <h1>
        some text
      </h1>
    </div>
    <div class="text">
      <p>
        some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred...
      </p>
    </div>
    <div class="center"></div>
</div>

Answer 3

您可以再添加一个子div并为其添加模糊。它适用于我的代码。

.container {
  width: 100%;
  height: 100%;
  min-height: 400px;
  position: relative;
}

.subcontainer {
  filter: blur(0.5rem);
}

.text {
  width: 50%;
}

.center {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f00;
  /* filter: blur(0); */
  /* filter: none; */
}

<div class="container">
  <div class="subcontainer">
    <div class="title">
      <h1>
        some text
      </h1>
    </div>
    <div class="text">
      <p>
        some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred...
      </p>
    </div>
  </div>
  <div class="center"></div>
</div>

Answer 4

最后是选择器 * 有用的情况：

body * {filter:blur(8px);}
.center {filter:none;}

我不得不将红色 div 移出容器

body * {filter:blur(8px);}
.center {filter:none;}

.container{
  width:100%;
  height:100%;
  min-height:400px;
  position:relative;
  z-index:1;
}
.text{
  width:50%;
}
.center{
  width:200px;
  height:200px;
  position:absolute;
  top: 50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:#f00;
  z-index:10;
  filter: none;
}

<div class="container">
    <div class="title">
      <h1>
        some text
      </h1>
    </div>
    <div class="text">
      <p>
        some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred...
      </p>
    </div>
</div> 
<div class="center"></div>

模糊整个页面，除了 div

Blur the whole page except a div

html

css

blur