Blur the whole page except a div

只谈情不闲聊 提交于 2021-01-27 20:01:41

问题


I have the following code.

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

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?

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>

回答1:


You should use not for this.

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>



回答2:


Can add one more sub div and add blur to it. I did it. Its working to my code.

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



回答3:


Here is finally a case where the selector * can be useful:

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

I had to move the red div out of the container

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>



回答4:


Try adding blur effect only to the inner elements instead of the parent element ("container" class). Below CSS must work:

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


来源:https://stackoverflow.com/questions/60018959/blur-the-whole-page-except-a-div

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!