transicion - ¿Borrando una imagen a través de CSS?

poner imagen de fondo en header

Question

En muchos teléfonos inteligentes (por ejemplo, Samsung Galaxy II) cuando navega por una galería de fotos, su copia borrosa se muestra en segundo plano. ¿Se puede lograr esto mediante CSS dinámicamente (es decir, sin la copia de la foto que se está preparando de antemano guardada)? ¿Hay algún tipo de filtro de imagen CSS complejo para desenfocar una imagen?

Answer 1

Con CSS3 podemos ajustar fácilmente una imagen. Pero recuerda que esto no cambia la imagen. Solo muestra la imagen ajustada.

Vea el siguiente código para más detalles.

Para hacer una imagen gris:

img {
-webkit-filter: grayscale(100%);
}

Para dar un aspecto sepia:

img {
-webkit-filter: sepia(100%);
}

Para ajustar el brillo:

img {
-webkit-filter: brightness(50%);
}

Para ajustar el contraste:

img {
-webkit-filter: contrast(200%);
}

Para desenfocar una imagen:

img {
-webkit-filter: blur(10px);
}

También deberías hacerlo por un navegador diferente. Eso incluye todos los enunciados css

 filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);

Para usar múltiples

 filter: blur(5px) grayscale(1);

Answer 2

Este código funciona para el efecto de desenfoque para todos los navegadores.

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

Answer 3

Los filtros CSS3 actualmente solo funcionan en los navegadores webkit (safari y chrome).

Answer 4

Puedes usar inserthtml.com/2012/06/css-filters . Son relativamente fáciles de implementar, aunque solo se admiten en webkit en el momento. Sin embargo, el navegador de Samsung Galaxy 2 debería ser compatible, ya que creo que es un navegador webkit.

Answer 5

Sí, está usando el siguiente código que le permitirá aplicar un efecto borroso a la imagen especificada y también le permitirá elegir la cantidad de desenfoque.

img {
-webkit-filter: blur(10px);
filter: blur(10px);
}

Answer 6

img {
filter: blur(var(--blur));
}