Cómo - Añadir efectos de imagen

Aprende a añadir efectos visuales a las imágenes.

Filtros de CSS

El CSS filter establecimiento tiene efectos visuales (like blur and saturation) a un elemento.

Nota: La propiedad de filtro no es compatible con Internet Explorer, Edge 12, o Safari 5.1 y anteriores.

Ejemplo Escala de grises

Cambiar el color de todas las imágenes en blanco y negro (100% gray) :

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

Original image

grayscale(100%)

Inténtalo tú mismo "

Ejemplo falta de definición

Aplicar un efecto borroso a todas las imágenes:

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

Original image

blur(5px)

Inténtalo tú mismo "

Ir a nuestro CSS filter Property para aprender más acerca de los filtros CSS.