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

467

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?

zorro
fuente
2
Desenfoque solo una parte de una imagen: codepen.io/vsync/pen/gjMEWm
vsync

Respuestas:

528

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

Aniket
fuente
79
Una forma ligeramente mejor de hacerlo es usar .content: before en lugar del marcado adicional "background-image". Actualicé
Matthew Wilcoxson
66
fwiw, solo Webkit ha implementado esta característica, y solo con el prefijo del proveedor, por lo que los prefijos ms-, o-, moz- son inútiles.
Jon z
2
Es compatible con Firefox 35.0 y posterior de forma predeterminada: caniuse.com/#feat=css-filters
Mikko Rantalainen
1
JUst actualizado a FF 35, y funciona sin prefijo
Aamir Mahmood
1
@EdwardBlack No creo que sea un problema, pero para tener un desenfoque permanente, tendrá que recurrir a herramientas de edición de imágenes. La otra forma podría ser tener algún tipo de captura de imágenes utilizando phantomJS / navegador webkit sin cabeza y luego servirlo, pero esa es una forma tediosa de lograr el mismo resultado.
Aniket
70

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.

Necrona
fuente
1
La limitación con esto es que no puedes manipular pseudo elementos en js. Si no lo necesita, entonces es una buena solución.
posit labs
66
Si no te gusta la frontera blanca borrosa puede aumentar el widthy heighta 110%y luego añadir un desplazamiento de -5%a topy leftde la content:beforeclase.
Chad Fawcett
1
Me está funcionando, pero quiero que esa imagen de fondo también se desplace cuando el usuario desplace la página. La posición FIJA está deteniendo eso. ¿Cómo deshacerse de este problema?
KUMAR PROFUNDO
61

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.

Hitautodestruct
fuente
55
Incluso si no funciona en todos los navegadores, obtienes mi voto para proporcionar la forma correcta de no piratear las especificaciones para hacer esto.
MrMesees
AFAIK esta es una característica no estándar, por lo que no hay especificaciones para ello.
Vitim.us
3
¡AVISO! ¡En 2018, el soporte del navegador se ha reducido significativamente para esto! No es compatible con Edge, Firefox o Chrome.
protoEvangelion
@protoEvangelion Parece que estará disponible en Edge 16+, y no veo ningún otro navegador que diga que no implementará esto. ¿Algún hecho para respaldar estas afirmaciones?
hitautodestruct
@hitautodestruct Según caniuse.com IE, Edge 16, Firefox y Chrome no admiten esto de forma predeterminada en este momento. Tienes razón en que Edge 17+ es compatible con esto. Gracias por señalar eso. Enfriar respuesta, aunque dicho sea de paso, estoy seguro que los navegadores esperanza implementar esta :)
protoEvangelion
26

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.

laboratorios de posit
fuente
6

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>

Sumitava Das
fuente
5

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 */
}
a99
fuente
A mi no me funciona. ¿Tienes un jsfiddle que funcione?
Matt
2

En la .contentpestaña en CSS cámbialo a position:absolute. De lo contrario, la página representada no será desplazable.

saikat
fuente
1

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

SharpC
fuente
descargar 2 imgs
Ced
1

Todo lo que realmente necesitas es "filtro":

blurWhatEverYouWantInPixels»);"

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>

codeWithMe
fuente
1

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

Max Tusken
fuente
¿Alguna forma ingeniosa de hacer que esto funcione durante las localhostpruebas?
Jonathan
La cantidad de desenfoque para una imagen de resolución grande es demasiado sutil, ¿cómo puedo aumentar drásticamente la cantidad de desenfoque sin que parezca bloqueada? El ancho ayuda un poco, pero se ve demasiado bloqueado si me desenfoco demasiado
Jonathan
0

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

Jonathan
fuente
0

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

prajeesh loremine
fuente
0

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>

Harsha Alva
fuente
0

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;
      }
Eljeddi Oussema
fuente
0
$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);
    }
}
Carlos Boyzo
fuente
1
Agregar una explicación a su respuesta sería genial.
Arvind Maurya
Whit Sass puse el siguiente código, y pinté todos los elementos en el cuerpo, puede haber pedido ayuda para tener solo una imagen en el fondo del cuerpo ????? $ fondo: url (/grid/assets/img/backimage.png); {relleno: 0; margen: 0; } cuerpo {:: antes {contenido: ""; altura: 1008px; ancho: 100%; pantalla: flex; posición: absoluta; imagen de fondo: $ fondo; repetición de fondo: sin repetición; posición de fondo: centro; tamaño de fondo: cubierta; filtro: desenfoque (1.6rem); }}
Carlos Boyzo
0

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>

constructores de código
fuente
-6

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!

usuario7226407
fuente
44
no responde la pregunta
gorn