Ejemplo
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%)
Consejo: Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad de filtro define efectos visuales (like blur and saturation) a un elemento (often <img>) .
| Valor por defecto: | ninguna |
|---|---|
| Heredado: | no |
| animatable: | yes. Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.WebkitFilter="grayscale(100%)" Try it |
Soporte para el 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 funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| filter | 18.0 -webkit- | 13.0 | 35.0 | 9.1 6.0 -webkit- | 15.0 -webkit- |
Nota: Mayor versiones de Internet Explorer (4.0 to 8.0) apoyaron un no-estándar "filter" propiedad que ha quedado en desuso. Esto se utiliza sobre todo para la opacidad cuando se necesita el apoyo de IE8 y hacia abajo.
sintaxis CSS
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();Consejo: Para utilizar varios filtros, separar cada filtro con un espacio (See "More Examples" below) .
Funciones de filtro
Nota: Los filtros que utilizan los valores de porcentaje (ie 75%) , también aceptar el valor como decimal (ie 0.75) .
| Filtrar | Descripción | Juegalo |
|---|---|---|
| none | Valor por defecto. Especifica ningún efecto | Juegalo " |
| blur( px ) | Aplica un efecto de desenfoque de la imagen. Un valor más grande creará más borroso. Si no se especifica ningún valor, se utiliza 0. | Juegalo " |
| brightness( % ) | Ajusta el brillo de la imagen. 0%, la imagen será completamente negro. 100% (1) es predeterminada y representa la imagen original. Los valores superiores a 100% proporcionarán resultados más brillantes. | Juegalo " |
| contrast( % ) | Permite ajustar el contraste de la imagen. 0%, la imagen será completamente negro. 100% (1) es predeterminada y representa la imagen original. Los valores superiores a 100% proporcionarán resultados con menos contraste. | Juegalo " |
| drop-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 más grande creará más falta de definición (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). difusión - 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 4 de longitud; no va a hacer que si se añade. de color - opcional. Añade un color a la sombra. Si no se especifica, el color depende del navegador (often black) . Un ejemplo de la creación de una sombra de color rojo, que es 8 píxeles grandes, tanto horizontal como verticalmente, con un efecto de desenfoque de 10px: filtro: las sombras paralelas (8 píxeles 8px 10px rojo); Consejo: Este filtro es similar al box-shadow propiedad. | Juegalo " |
| grayscale( % ) | Convierte la imagen a escala de grises. 0% (0) es el valor predeterminado 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. | Juegalo " |
| 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 es por defecto, y representa la imagen original. Nota: El valor máximo es 360deg. | Juegalo " |
| invert( % ) | Invierte la muestras en la imagen. 0% (0) es el valor predeterminado y representa la imagen original. 100% hará que la imagen totalmente invertido. Nota: Los valores negativos no están permitidos. | Juegalo " |
| opacity( % ) | Establece el nivel de opacidad de la imagen. El nivel de opacidad describe el nivel de transparencia, donde: 0% es totalmente transparente. 100% (1) es por defecto y representa la imagen original (no transparency) . Nota: Los valores negativos no están permitidos. Consejo: Este filtro es similar a la opacidad propiedad. | Juegalo " |
| saturate( % ) | Satura la imagen. 0% (0) hará que la imagen completamente no saturada. 100% es por defecto y representa la imagen original. Los valores superiores a 100% proporciona resultados de super-saturada. Nota: Los valores negativos no están permitidos. | Juegalo " |
| sepia( % ) | Convierte la imagen en sepia. 0% (0) es el valor predeterminado y representa la imagen original. 100% hará que la imagen por completo la sepia. Nota: Los valores negativos no están permitidos. | Juegalo " |
| url() | La url() función toma la ubicación de un archivo XML que especifica un filtro de SVG, y puede incluir un ancla para un elemento de filtro específico. Ejemplo: Filtro: url(svg-url#element-id) | |
| initial | Establece esta propiedad a su valor por defecto. Lea acerca inicial | |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Más ejemplos
Ejemplo desenfoque
Aplicar un efecto borroso a la imagen:
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
Ejemplo de brillo
Ajustar el brillo de la imagen:
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
Ejemplo de contraste
Ajustar el contraste de la imagen:
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
Ejemplo gota de sombra
Aplicar un efecto de sombra de la imagen:
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop-shadow(8px 8px 10px red)
Ejemplo de escala de grises
Convertir la imagen a escala de grises:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
Ejemplo Hue Rotación
Aplicar un giro de tonos en la imagen:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue-rotate(90deg)
Ejemplo Invertir
Invertir las muestras en la imagen:
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
Ejemplo de opacidad
Establecer el nivel de opacidad de la imagen:
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
Ejemplo Saturar
Saturar la imagen:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
Ejemplo de la sepia
Convertir la imagen en sepia:
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
Los filtros que combinan varios filtros /
Para utilizar varios filtros, separar cada filtro con un espacio.
Nota: El orden es importante (ie using grayscale() después de sepia() dará lugar a una imagen completamente gris).
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
todos los filtros
Una demostración de todas las funciones de filtro:
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter:
contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter:
grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter:
hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter:
invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter:
opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter:
saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter:
sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter:
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
} Inténtalo tú mismo " Páginas relacionadas
Referencia HTML DOM: filter property