Размыть всю страницу, кроме div

Question

У меня есть следующий код.

Мне нужно, чтобы все было размыто, кроме красного div в центре.

Я пытался использовать filter:none или filter:blur(0), но это не так т работа. Как я могу размыть все на заднем плане, кроме красного div?

edit: я тоже пытался использовать его с 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

Вы должны использовать , а не для этого.

Если вы используете .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 2

Вот, наконец, случай, когда селектор * может быть полезен:

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>

Answer 3

Можно добавить еще один sub 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

Попробуйте добавить эффект размытия только к внутренним элементам вместо родительского (класс «контейнер»). Ниже 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;
  }