Ejemplo
Cambiar el color de una imagen a blanco y negro (100% grayscale) :
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
Inténtalo tú mismo " Definición y Uso
La propiedad filtro añade efectos visuales (like blur and saturation) a las imágenes.
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por Webkit especifican la primera versión que trabajó con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| filter | 18.0 Webkit | 13.0 | 35.0 | 6.0 Webkit | 15.0 Webkit |
Nota: Chrome, Safari y Opera soportan una alternativa, la propiedad WebkitFilter.
Sintaxis
Devolver la propiedad de filtro:
object .style.filterEstablecer la propiedad de filtro:
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
Funciones de filtro
Nota: Los filtros que utilizan valores de porcentaje (ie 75%) , también aceptar el valor como decimal (ie 0.75) .
| Filtrar | Descripción |
|---|---|
| ninguna | Especifica ningún efecto |
| blur( px ) | Aplica un efecto de desenfoque de la imagen. Un valor mayor creará más borroso. Si no se especifica ningún valor, se utiliza 0. |
| brightness( % ) | Ajusta el brillo de la imagen. 0% hará que la imagen completamente negro. 100% (1) es predeterminada y representa la imagen original. Los valores superiores a 100% proporcionarán resultados más brillantes. |
| contrast( % ) | Permite ajustar el contraste de la imagen. 0% hará que la imagen completamente negro. 100% (1) es predeterminada y representa la imagen original. Los valores superiores a 100% proporcionarán resultados con menos contraste. |
| desplegable shadow( h-shadow v-shadow blur spread color ) | Aplica un efecto de sombra a la imagen. Valores posibles: h-sombra - Requerido. Especifica un valor de píxel de la sombra horizontal. Los valores negativos colocan la sombra a la izquierda de la imagen. v-sombra - Requerido. Especifica un valor de píxel de la sombra vertical. Los valores negativos colocan la sombra por encima de la imagen. difuminar - Opcional. Este es el tercer valor, y debe estar en píxeles. Añade un efecto de desenfoque a la sombra. Un valor mayor creará más borroso (la sombra se hace más grande y más ligero). Los valores negativos no están permitidos. Si no se especifica ningún valor, se utiliza 0 (borde de la sombra es fuerte). Spread - Opcional. Este es el cuarto valor, y debe estar en píxeles. Los valores positivos harán que la sombra se expanda y crezca más grande, y los valores negativos harán que la sombra se encoja. Si no se especifica, será 0 (the shadow will be the same size as the element) . Nota: Chrome, Safari y Opera, y tal vez otros navegadores, no son compatibles con este cuarto de longitud; no va a hacer que si se añade. Color: Opcional. Añade un color a la sombra. Si no se especifica, el color depende del navegador (often black) . Consejo: Este filtro es similar a la caja de sombra de la propiedad. |
| grayscale( % ) | Convierte la imagen a escala de grises. 0% (0) es predeterminada y representa la imagen original. 100% hará que la imagen completamente gris (used for black and white images) . Nota: Los valores negativos no están permitidos. |
| hue- rotate( deg ) | Se aplica una rotación de tonalidad en la imagen. El valor define el número de grados alrededor del círculo de color se ajustarán las muestras de imagen. 0deg está predeterminado, y representa la imagen original. Nota: El valor máximo es 360deg. |
| invert( % ) | Invierte las muestras en la imagen. 0% (0) es predeterminada y representa la imagen original. 100% hará que la imagen completamente invertido. Nota: Los valores negativos no están permitidos. |
| opacity( % ) | Establece el nivel de opacidad de la imagen. El nivel de opacidad describe el nivel de transparencia, donde: 0% es completamente transparente. 100% (1) es predeterminada y representa la imagen original (no transparency) . Nota: Los valores negativos no están permitidos. Consejo: Este filtro es similar a la opacidad propiedad. |
| saturate( % ) | Satura la imagen. 0% (0) hará que la imagen completamente no-saturado. 100% es el valor predeterminado y representa la imagen original. Los valores superiores a 100% proporciona resultados de super-saturada. Nota: Los valores negativos no están permitidos. |
| sepia( % ) | Convierte la imagen a color sepia. 0% (0) es predeterminada y representa la imagen original. 100% hará que la imagen por completo la sepia. Nota: Los valores negativos no están permitidos. |
Detalles técnicos
| Versión CSS | CSS3 |
|---|
Páginas relacionadas
Referencia CSS: filter property
<Estilo de objeto