Cómo aplicar un filtro de desenfoque CSS 3 a una imagen de fondo


Answers

pen

Suprimir la necesidad de un elemento adicional, junto con hacer que el contenido se ajuste al flujo de documentos en lugar de ser fijo / absoluto como otras soluciones.

Logrado usando

.content {
  overflow: auto;
  position: relative;
}

Se necesita desbordamiento automático, de lo contrario, el fondo quedará compensado por unos pocos píxeles en la parte superior.

Después de esto, simplemente necesitas

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

EDITAR Si está interesado en eliminar los bordes blancos en los bordes, use un ancho y una altura del 110% y un margen superior e izquierdo de -5% . Esto aumentará un poco los fondos, pero no debería haber un color sólido sangrando desde los bordes.

Pluma actualizada aquí: https://codepen.io/anon/pen/QgyewB - Gracias Chad Fawcett por la sugerencia.

Question

Tengo un archivo JPEG que estoy usando como imagen de fondo para una página de búsqueda, y estoy usando CSS para configurarlo porque estoy trabajando en contextos de Backbone.js :

background-image: url("whatever.jpg");

Quiero aplicar un filtro de desenfoque CSS 3 solo al fondo, pero no estoy seguro de cómo diseñar ese solo elemento. Si intento:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

justo debajo background-image en mi CSS, estiliza toda la página, en lugar de solo el fondo. ¿Hay alguna manera de seleccionar solo la imagen y aplicar el filtro a eso? Alternativamente, ¿hay alguna forma de desactivar el desenfoque para cada elemento de la página?




En la pestaña .content en CSS, cámbielo a la position:absolute . De lo contrario, la página procesada no será desplazable.




Aunque todas las soluciones mencionadas son muy ingeniosas, todas parecían tener problemas menores o posibles efectos indirectos con otros elementos en la página cuando los probé.

Al final, para ahorrar tiempo, simplemente volví a mi antigua solución: utilicé Paint.NET y pasé a Effects, Gaussian Blur con un radio de 5 a 10 píxeles y acabo de guardar eso como la imagen de la página. :-)

HTML:

<body class="mainbody">
</body

CSS:

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

EDITAR:

Finalmente lo hice funcionar, ¡pero la solución no es directa! Mira aquí:




Como se afirma en otras respuestas, esto se puede lograr con:

  • Una copia de la imagen borrosa como fondo.
  • Un pseudo elemento que puede filtrarse y colocarse detrás del contenido.

También puedes usar backdrop-filter

Hay una propiedad compatible llamada backdrop-filter , actualmente es compatible con Edge , Safari y iOS Safari 9.2+ (ver caniuse.com para estadísticas).

De backdrop-filter :

La propiedad de filtro de fondo proporciona efectos como la borrosidad o el cambio de color del área detrás de un elemento, que luego se puede ver a través de ese elemento ajustando la transparencia / opacidad del elemento.

Lo usarías así:

.box {
  backdrop-filter: blur(5px);
  /* background, width, height etc. */
}

Para estadísticas ver caniuse.com




Simplemente dejando saber a pep, si esto ya no se dijo. Si desea que el contenido sea desplazable, establezca la posición del contenido en absoluta:

content { 
   position: absolute;
   ...
}

No sé si esto fue solo para mí, pero si no es la solución!

Además, dado que el fondo es fijo, significa que tienes un efecto 'Parallax'. ¡Así que sepa que esta persona no solo le enseñó cómo crear un fondo borroso, sino también un efecto de fondo de paralaje!




div{
 background: inherit;
 width: 250px;
 height: 350px;
 position: absolute;
 overflow: hidden;  //adding overflow hidden
}
div:before{
 content: ‘’;
 width: 300px;
 height: 400px;
 background: inherit; 
 position: absolute;
 left: -25px;  //giving minus -25px left position
 right: 0;
 top: -25px;   //giving minus -25px top position 
 bottom: 0;
 box-shadow: inset 0 0 0 200px rgba(255,255,255,0.3);
 filter: blur(10px);
}