Cómo desenfocar (css) div sin desenfocar el elemento secundario (y sin absoluto) [duplicado]

.content {
  float: left;
  width: 100%;
  background-image: url('images/zwemmen.png');
  height: 501px;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}

.opacity {
  background-color: rgba(5, 98, 127, 0.9);
  height: 100%;
  overflow: hidden;
}

.info {
  float: left;
  margin: 100px 0px 0px 30px;
  width: 410px;
}

<div class="content">
  <div class="opacity">
    <div class="image">
      <img src="images/zwemmen.png" alt="" />
    </div>
    <div class="info">
      a div wih all sort of information
    </div>
  </div>
</div>

Expandir fragmento

Si no quiero que el botón se vea borroso, ¿qué debo hacer?

Me gustaría solucionar el problema sin recurrir al posicionamiento absoluto.

Mar 11 '15 06:03 ggoha

Cuando se utiliza la propiedad bluro opacity, no es posible ignorar el elemento secundario. Si aplica cualquiera de esas propiedades al elemento principal, también se aplicará automáticamente a los elementos secundarios.

Existe una solución alternativa: cree dos elementos dentro de su elemento principal div: uno divpara el fondo y otro divpara el contenido. Establezca position:relativeen el elemento principal divy establezca position:absolute; top:0px; right:0px; bottom:0px; left:0px;(o establezca alto/ancho al 100%) en el elemento secundario para el fondo. Con este método, el contenido divno se verá afectado por las propiedades en segundo plano.

Ejemplo:

#parent_div {
  position: relative;
  height: 100px;
  width: 100px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  filter: blur(3px);
  z-index: -1;
}

<div id="parent_div">
  <div id="background"></div>
  <div id="textarea">My Text</div>
</div>

Expandir fragmento

Si ve el fondo enmascarando el contenido, utilice la z-indexpropiedad para enviar el fondo detrás del segundo contenido div.

Mar 25 '2015 07:03 Ashish Panwar

¿Cómo desactivar el desenfoque en el elemento secundario?

.enableBlur>* {
  filter: blur(1.2px);
}

.disableBlur {
  filter: blur(0);
}

<div class="enableBlur">
  <hr>
  qqqqq<br>
  <span>qqqqq</span><br>
  <hr  class="disableBlur">
  <div>aaaaa</div>
  <div>bbbbb</div>
  <div class="disableBlur">DDDDD</div>
  <hr>
  <img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
  <img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
</div>

Expandir fragmento

Mar 11 '2019 13:03 qwabra

Mi solución parece un poco más sencilla pero puede tener algunos problemas de compatibilidad. Solo usé el filtro de fondo con el filtro de desenfoque.

backdrop-filter: blur(2px);

Jun 15 '2020 17:06 Carson Stevens

Simplemente cree dos divisiones y ajuste sus índices z y márgenes de manera que la división que desea difuminar quede debajo de la división que desea que aparezca en la parte superior.

PD: No cree una división dentro de una división porque el niño hereda las propiedades de los padres.

#forblur {
  height: 200px;
  width: 200px;
  background-color: blue;
  margin: auto;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px) -ms-filter: blur(3px);
  filter: blur(3px);
  z-index: -1;
}

#on-top-container {
  margin: auto;
  margin-top: -200px;
  text-align: center;
  height: 200px;
  width: 200px;
  z-index: 10;
}

<div id="forblur">
</div>
<div id="on-top-container">
  <p>TEXT</p>
</div>

Expandir fragmento

Sep 20 '2015 09:09 Cyclops Blue