html - 模糊除 div 之外的整个页面

Question

我有以下代码。

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

我尝试使用filter:noneorfilter: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>

标签： htmlcssblur

Answer 1

你不应该使用这个。

如果你使用.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>