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 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 solo ese elemento. Si lo intento:

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

justo debajo background-imagede mi CSS, da estilo a 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 manera de desactivar el desenfoque para todos los demás elementos de la página?

Mira esta pluma .

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

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

Ambos se colocan con position: fixedy left: 0; right: 0;. La diferencia en mostrarlos proviene de los z-indexvalores que se han establecido de manera diferente para los elementos.

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  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;
}

<div class="background-image"></div>
<div class="content">
  <p>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.</p>
  <p>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.</p>
</div>

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 se compensará con 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 de 110%y una izquierda y la parte superior de -5%. Esto ampliará un poco tus fondos, pero no debería haber sangrado de color sólido desde los bordes.

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

Como se indicó en otras respuestas, esto se puede lograr con:

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

También puedes usar backdrop-filter

Hay una propiedad compatible llamada backdrop-filter, y actualmente es compatible con Chrome 76, Edge , Safari e iOS Safari (consulte las estadísticas en caniuse.com ).

De los devdocs de Mozilla :

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

Ver caniuse.com para estadísticas de uso.

Lo usarías así:

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

<div class="background background-filter"></div>

Actualización (06/12/2019) : Chromium se enviará con backdrop-filterhabilitado de forma predeterminada en la versión 76 que saldrá el 30/07/2019 .

Actualización (01/06/2019) : el equipo de Mozzilla Firefox ha anunciado que pronto comenzará a trabajar en su implementación.

Actualización (21/05/2019) : Chromium recién anunciado backdrop-filter está disponible en Chrome Chrome sin habilitar el indicador "Habilitar características de plataforma web experimental". Esto significa que backdrop-filterestá muy cerca de implementarse en todas las plataformas de Chrome.

Necesita reestructurar su HTML para hacer esto. Debe desenfocar todo el elemento para desenfocar el fondo. Entonces, si desea desenfocar solo el fondo, debe ser su propio elemento.

Por favor revise 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;
}

<div class="backgroundImageCVR">
    <div class="background-image"></div>
    <div class="content">
      <p>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.</p>
      <p>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.</p>
    </div>
</div>

La siguiente es una solución simple para los navegadores modernos en CSS puro con un pseudo elemento 'antes', como la solución de Matthew Wilcoxson.

Para evitar la necesidad de acceder al pseudo elemento para cambiar la imagen y otros atributos en JavaScript, simplemente utilícelo inheritcomo valor y acceda a ellos a través del elemento padre (aquí body).

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 .contentpestaña en CSS cámbialo a position:absolute. De lo contrario, la página representada no será desplazable.

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

Al final para ahorrar tiempo, simplemente volví a mi solución anterior: usé Paint.NET y fui a Efectos, Desenfoque gaussiano con un radio de 5 a 10 píxeles y simplemente lo guardé 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 puse a funcionar, ¡pero la solución no es en absoluto sencilla! Mira aquí:

• filtro: desenfoque (1px); no funciona en firefox, IE y opera

Todo lo que realmente necesitas es "filtro":

blur(«WhatEverYouWantInPixels»);"

body {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

#background {
    background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    /* START */
    /* START */
    /* START */
    /* START */

    /* You can adjust the blur-radius as you'd like */
    filter: blur(3px);
}

<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>

Por supuesto, esta no es una solución CSS, pero puede usar el CDN Proton con filter:

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

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

No escribí esto, pero noté que había un polyfill para el parcialmente compatible backdrop-filtercon el compilador CSS SASS, por lo que si tiene una tubería de compilación se puede lograr muy bien (también usa TypeScript):

https://codepen.io/mixal_bl4/pen/EwPMWo

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 posición de fondo con desenfoque para ajustar los cambios de altura.

Explicación

• La tarjeta está contenida en un contenedor de<div> clase , que es una caja flexible.
• La tarjeta se compone de dos elementos, una imagen que también es un enlace y contenido.
• El enlace <a>, clase enlace , se posiciona con respecto .
• El enlace consta de dos subelementos, un desenfoque de<div> clase de marcador de posición y una imagen de clase<img> que es la imagen clara.
• Ambos están posicionados en absoluto y tienen width: 100%, pero la imagen de clase tiene un orden de pila 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 borroso 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;
}

<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">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. </p>
  </div>
</div>

Ahora esto se vuelve aún más simple y flexible usando CSS GRID. Solo tiene que superponer el fondo borroso (imgbg) con el texto (h2)

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

y el css:

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

Sin usar la pseudo-clase de

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}

<body></body>

Si desea que el contenido sea desplazable, establezca la posición del contenido en absoluto:

content {
   position: absolute;
   ...
}

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

Además, dado que el fondo es fijo, significa que tienes un efecto de "paralaje" . Así que ahora, no solo esta persona te enseñó cómo hacer un fondo borroso, ¡sino que también es un efecto de fondo de paralaje!