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

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 bash:

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

Mira este bolígrafo .

Deberá usar dos contenedores diferentes, uno para la imagen de fondo y el otro para su contenido.

En el ejemplo, he creado dos contenedores, .background-image y .content .

Ambos se colocan con la position: fixed e left: 0; right: 0; left: 0; right: 0; . La diferencia en mostrarlos proviene de los valores del z-index que se han establecido de forma diferente para los elementos.

HTML

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.

Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.

CSS

 .background-image { position: fixed; left: 0; right: 0; z-index: 1; display: block; background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG'); width: 1200px; height: 800px; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } .content { position: fixed; left: 0; right: 0; z-index: 9999; margin-left: 20px; margin-right: 20px; } 

Disculpas por el texto de Lorem Ipsum .

Actualizar

Gracias a Matthew Wilcoxson por una mejor implementación usando .content:before http://codepen.io/akademy/pen/FlkzB

bolígrafo

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

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 Mozilla devdocs :

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

Necesita volver a estructurar su HTML para poder hacer esto. Tienes que desenfocar todo el elemento para desenfocar el fondo. Entonces, si deseas difuminar solo el fondo, tiene que ser su propio elemento.

Por favor, consulte el siguiente código: –

 .backgroundImageCVR{ position:relative; padding:15px; } .background-image{ position:absolute; left:0; right:0; top:0; bottom:0; background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg'); background-size:cover; z-index:1; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } .content{ position:relative; z-index:2; color:#fff; } 
 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.

Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.

Solución simple para navegadores modernos en css puro con un pseudo elemento ‘anterior’ como la solución de Matthew Wilcoxson. Para evitar la necesidad de acceder al pseudo elemento para cambiar la imagen y otros atributos en el script java, el uso simple heredará como valor y accederá a ellos a través del elemento padre (aquí el cuerpo).

 body::before{ content: ""; /* important */ z-index: -1; /* important */ position: inherit; left: inherit; top: inherit; width: inherit; height: inherit; background-image: inherit; background-size: cover; filter: blur(8px); } body{ background-image: url("xyz.jpg"); background-size: 0 0; /* image should not be drawn here */ width: 100%; height: 100%; position: fixed; /* or absolute for scrollable backgrounds */ } 

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:

   

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í:

  • filter: blur (1px); no funciona en Firefox, IE y Opera

Esta respuesta es para un diseño de tarjeta horizontal de Material Design con altura dinámica y una imagen.

Para evitar la distorsión de la imagen debido a la altura dinámica de la tarjeta, puede usar una imagen de marcador de fondo con desenfoque para ajustar los cambios de altura.

Explicación

  • La tarjeta está contenida en un

    con contenedor de clase, que es un flexbox.

  • La tarjeta se compone de 2 elementos, una imagen que también es un enlace y contenido.
  • El enlace , enlace de clase, se coloca relativo .
  • El enlace consta de 2 subelementos, un marcador de posición

    borroso de clase y una imagen de clase que es la imagen clara.

  • Ambas están posicionadas como absolutas y tienen width: 100% , pero la imagen de clase tiene un orden de astackmiento más alto, es decir, z-index: 2 , que lo coloca por encima del marcador de posición.
  • La imagen de fondo para el marcador de posición borrosa se establece a través del estilo en línea en el HTML.

Código

 .wrapper { display: flex; width: 100%; border: 1px solid rgba(0, 0, 0, 0.16); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23); background-color: #fff; margin: 1rem auto; height: auto; } .wrapper:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .link { display: block; width: 200px; height: auto; overflow: hidden; position: relative; border-right: 2px solid #ddd; } .blur { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } .pic { width: calc(100% - 20px); max-width: 100%; height: auto; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .pic:hover { transition: all 0.2s ease-out; transform: scale(1.1); text-decoration: none; border: none; } .content { display: flex; flex-direction: column; width: 100%; max-width: 100%; padding: 20px; overflow-x: hidden; } .text { margin: 0; } 
 
Title

Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt.

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

Por supuesto, esto no es una solución CSS, pero puede usar CDN Proton con filtro:

 body { background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1'); } 

de https://developer.wordpress.com/docs/photon/api/#filter

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!

    Intereting Posts