Propiedad de estilo de filtro

Definición y uso

filtro Añadir efectos visuales a la imagen (como desenfoque y saturación).

Véase también:

Manual de CSS:Propiedad de filtro

Ejemplo

Cambiar el color de la imagen a blanco y negro (100% de gris):

document.getElementById("myImg").style.filter = "grayscale(100%)";

Prueba personal

Sintaxis

Devolver la propiedad de filtro:

objeto.style.filter

Establecer la propiedad de filtro:

objeto.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Función Filtro

注释：El filtro también acepta valores decimales (por ejemplo, 0.75) para valores porcentajes (como 75%).

Filtro Descripción
none Define sin efecto.
blur(px)

Aplicar un efecto de desenfoque a la imagen. Valores más grandes producen un desenfoque mayor.

Si no se especifica un valor, se usará 0.
brightness(%)

Ajustar la luminosidad de la imagen.

0% harán que la imagen se torne completamente oscura.

100% (1) es el valor predeterminado, lo que representa la imagen original.

Un valor superior al 100% proporcionará un resultado más brillante.
contrast(%)

Ajustar el contraste de la imagen.

0% harán que la imagen se torne completamente oscura.

100% (1) es el valor predeterminado, lo que representa la imagen original.

Un valor superior al 100% proporcionará un resultado de contraste más bajo.
drop-shadow(h-shadow v-shadow blur spread color)

Aplicar un efecto de proyección a la imagen.

Valores posibles:

h-shadow − obligatorio. Especificar el valor en píxeles de la sombra horizontal. Un valor negativo colocará la sombra a la izquierda de la imagen.

v-shadow − obligatorio. Especificar el valor en píxeles de la sombra vertical. Un valor negativo colocará la sombra sobre la imagen.

blur − opcional. Tercer valor, debe especificarse en píxeles. Añadir un efecto de borroso a la sombra. Un valor mayor producirá más borroso (la sombra se volverá mayor y más brillante). No se permite el uso de valores negativos. Si no se especifica un valor, se usará 0 (los bordes de la sombra serán afilados).

spread − opcional. Cuarto valor, debe especificarse en píxeles. Un valor positivo hará que la sombra se expanda y aumente, mientras que un valor negativo hará que la sombra se reduzca. Si no se especifica, será 0 (la sombra será del mismo tamaño que el elemento).

注释：Chrome, Safari y Opera, posiblemente otros navegadores, no admiten la cuarta longitud; si se añade, no se mostrará.

color：opcional. Añadir color a la sombra. Si no se especifica, el color depende del navegador (generalmente negro).

Consejo:Este filtro es similar a la propiedad de sombra del cuadro.
grayscale(%)

Convertir la imagen a escala de grises.

0% (0) es el valor predeterminado, lo que representa la imagen original.

100% harán que la imagen se torne completamente grisácea (usada para imágenes en blanco y negro).

注释：No se permiten valores negativos.
hue-rotate(deg)

Aplicar un giro de tono en la imagen. Este valor define los grados alrededor del anillo de color a los que se ajustarán las muestras de la imagen.

0deg es el valor predeterminado, lo que representa la imagen original.

注释：El valor máximo es de 360 grados.
invert(%)

Invertir los muestras en la imagen.

0% (0) es el valor predeterminado, lo que representa la imagen original.

100% harán que la imagen se invierta completamente.

注释：No se permiten valores negativos.
opacity(%)

Establecer el nivel de opacidad de la imagen. El nivel de opacidad describe el nivel de transparencia, donde:

0% es completamente transparente.

100% (1) es el valor predeterminado, lo que representa la imagen original (sin transparencia).

注释：No se permiten valores negativos.

Consejo:Este filtro es similar a la propiedad de opacidad.
saturate(%)

Ajustar la saturación de la imagen.

0% (0) harán que la imagen sea completamente insaturada.

100% es el valor predeterminado, lo que representa la imagen original.

Un valor superior al 100% proporcionará un resultado sobreexposto.

注释：No se permiten valores negativos.
sepia(%)

Convertir la imagen a marrón oscura.

0% (0) es el valor predeterminado, lo que representa la imagen original.

100% harán que la imagen se torne completamente marrón oscura.

注释：No se permiten valores negativos.

Detalles técnicos

Versión de CSS: CSS3

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0