模糊整个页面(除div外) [英] Blur the whole page except a div

问题描述

我有以下代码.

除了中心的红色div外，我都需要将所有这些都模糊.

I need to have it all blurred except the red div in the center.

我尝试使用 filter:none 或 filter:blur(0)，但这不起作用.如何使背景中除红色div以外的所有内容模糊?

I tried using filter:none or filter:blur(0) but that don't work. How can I blur everything in the background except the red div?

我也尝试将其与z-index一起使用，这也不起作用.

edit: I tried using it with z-index too, that does not work either.

.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>

推荐答案

您应使用不.

如果使用 .container div:not(.center)，则应解决问题.

If you use .container div:not(.center) your problem should be solved.

.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>

这篇关于模糊整个页面(除div外)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！