CSS3 filtro (filtro) propiedades
Ejemplos
Editar todos los colores a las imágenes en blanco y negro (100%) de color gris:
-webkit-filtro: escala de grises (100% ); / * Chrome, Safari, Opera * /
filtro: escala de grises (100%);
}
Trate »
Definiciones y uso
atributo de filtro define los elementos (por lo general <img>) efectos visuales (por ejemplo: Fuzzy y saturación).
| Por defecto: | ninguno |
|---|---|
| herencia: | no |
| ayuda de la animación: | Sí. Los detalles se pueden encontrar en CSS Animación |
| Version: | CSS3 |
| la sintaxis de JavaScript: | objetar .style.WebkitFilter = "en escala de grises (100%)" para tratar >> |
Soporte para el navegador
Las cifras de la tabla representan el primer navegador compatible con el número de versión del método.
Inmediatamente después del número de prefijo especificado el navegador -webkit-.
| propiedad | |||||
|---|---|---|---|---|---|
| filtro | 18.0 -webkit- | No es compatible | 35.0 | 6.0 -webkit- | 15.0 -webkit- |
Nota: Mayor navegador de Internet Explorer (4,0 a 8,0) para apoyar no estándar "filtro" propiedad ha sido abandonada. IE8 y navegadores anteriores a menudo utilizan la opacidad propiedad.
sintaxis CSS
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Consejo: Use espacios para separar múltiples filtros.
función de filtro
Nota: Los filtros suelen utilizar porcentaje (por ejemplo: 75%), por supuesto, también se puede utilizar para representar un decimal (por ejemplo: 0,75).
| filtro | descripción |
|---|---|
| ninguno | El valor por defecto, ningún efecto. |
| desenfoque (px) | desenfoque gaussiano a los ajustes de imagen. "Radio" para establecer un valor de la función de Gauss estándar es pobre, o el número de píxeles en la pantalla para fundir juntos, por lo que cuanto mayor sea el valor, más borrosa; Si el valor no está establecido, el valor por defecto es 0; este parámetro se puede ajustar valor de longitud css, pero no acepta los valores porcentuales. |
| brillo (%) | La aplicación de una multiplicación lineal a la imagen para que se vea más brillante o más oscura. Si el valor es 0%, la imagen es todo negro. El valor es 100%, no hay cambio en la imagen. Otros valores corresponden a lineal efecto multiplicador. Valor de más de 100% son posibles, la imagen será más brillante que el original. Si el valor no está establecido, el valor predeterminado es 1. |
| contraste (%) | Ajustar el contraste de la imagen. El valor es 0%, la imagen es todo negro. El valor es 100%, la imagen sin cambios. Los valores pueden superar el 100%, lo que significa que va a utilizar un contraste más bajo. Si el valor no está establecido, el valor predeterminado es 1. |
| drop-shadow (h-sombra v -Shadow color borroso propagación) | Establecer un efecto de sombra a la imagen. Las sombras se sintetizan en la siguiente imagen, puede haber ambigüedad, un color específico puede dibujar el diagrama de máscara versión offset. Función acepta <sombra> valor (definido en el fondo CSS 3) el tipo, además de que no se permite "inserción" de palabras clave. La función con la propiedad box-shadow box-shadow existente es muy similar, a excepción de que, a través del filtro, algunos navegadores para un mejor rendimiento ofrece aceleración de hardware.
|
| escala de grises (%) | Convertir la imagen a escala de grises. Se define el valor de la relación de conversión. Valor de 100% es completamente convertida a una imagen en escala de grises, un valor de 0% de la imagen sin cambios. Los valores entre 0% y 100%, el efecto multiplicador es lineal. Si no se establece el valor por defecto es 0; |
| hue-rotación (grados) | Aplicación a la rotación de la imagen tonalidad. imagen "ángulo" ángulo de anillo de color es un valor ajustado valor de ajuste. Valor 0 grados, el cambio de imagen. Si el valor no está establecido, el valor por defecto es 0 grados. Aunque no hay un valor máximo que excede el valor del equivalente de otro 360deg perímetro. |
| invertir (%) | imagen entrada inversora. Se define el valor de la relación de conversión. 100% del valor se invierte completamente. Un valor de 0%, la imagen sin cambios. Un valor entre 0% y 100%, el efecto multiplicador es lineal. Si el valor no está establecido, el valor por defecto es 0. |
| opacidad (%) | grado de conversión de la transparencia de la imagen. Se define el valor de la relación de conversión. 0% es totalmente transparente, y un valor de 100%, la imagen sin cambios. Un valor entre 0% y 100%, el efecto es multiplicador lineal, multiplicado por el número de muestras es también equivalente a la imagen. Si el valor no está establecido, el valor predeterminado es 1. Esta función es muy similar a la propiedad opacidad existente, excepto en que a través del filtro, con el fin de mejorar el rendimiento de algunos navegadores proporcionará la aceleración de hardware. |
| saturar (%) | Convierte la saturación de la imagen. Se define el valor de la relación de conversión. 0% es totalmente insaturado, no hay cambio en la imagen es 100%. Otro valor, el efecto multiplicador es lineal. Más de 100 se permite% del valor, hay un mayor grado de saturación. Si el valor no está establecido, el valor predeterminado es 1. |
| sepia (%) | Convertir la imagen en sepia. Se define el valor de la relación de conversión. Valor de 100% es completamente de color marrón oscuro, es 0% de la imagen sin cambios. Los valores entre 0% y 100%, el efecto multiplicador es lineal. Si no se establece el valor por defecto es 0; |
| url () | función URL toma un archivo XML, que establece un filtro SVG, y puede incluir un ancla para especificar un elemento de filtro específico. Por ejemplo: filter: url(svg-url#element-id) |
| inicial | Propiedad se establece a los valores predeterminados, consulte: la palabra clave inicial CSS |
| heredar | Esta propiedad se hereda del elemento padre, se puede ver: el CSS hereda la palabra clave |
más ejemplos
ejemplos fuzzy
Fotos de desenfoque gaussiano:
-webkit-filtro: Falta de definición (5px) ; / * Chrome, Safari, Opera * /
Filtro: Falta de definición (5px);
}
Trate »
Instancia función de brillo
Hacer que el más brillante de la foto:
-webkit-filtro: brillo (200% ); / * Chrome, Safari, Opera * /
Filtro: brillo (200%);
}
Trate »
Instancia función de contraste
Ajustar el contraste de la imagen:
-webkit-filtro: contraste (200% ); / * Chrome, Safari, Opera * /
Filtro: contraste (200%);
}
Trate »
Ejemplos de funciones de sombra paralela
Establecer un efecto de sombra de la imagen:
-webkit-filtro: las sombras paralelas ( 8 píxeles 8px 10px rojo); / * Chrome, Safari, Opera * /
filtro: las sombras paralelas (8 píxeles 8px 10px rojo);
}
Trate »
Instancia de función de escala de grises
Convertir la imagen a escala de grises:
-webkit-filtro: escala de grises (50% ); / * Chrome, Safari, Opera * /
filtro: escala de grises (50%);
}
Trate »
(ejemplos) Función tonalidad-rotación
Aplicaciones de rotación tono a la imagen:
-webkit-filtro: hue-rotación ( 90 grados); / * Chrome, Safari, Opera * /
Filtro: hue-rotación (90 grados) ;
}
Trate »
Instancia Función Invertir
imagen entrada inversora:
-webkit-filtro: invertido (100% ); / * Chrome, Safari, Opera * /
Filtro: invertido (100%);
}
Trate »
Opacidad Instancia Función
grado de conversión de la transparencia de la imagen:
-webkit-filtro: opacidad (30% ); / * Chrome, Safari, Opera * /
Filtro: opacidad (30%);
}
Trate »
Saturar Instancia Función
La conversión de la saturación de la imagen:
-webkit-filtro: saturar (800% ); / * Chrome, Safari, Opera * /
Filtro: saturar (800%);
}
Trate »
Instancia función de la sepia
Convertir las imágenes en sepia:
-webkit-filtro: sepia (100% ); / * Chrome, Safari, Opera * /
Filtro: sepia (100%);
}
Trate »
función compuesta
El uso de varios filtros, cada filtro separados por espacios.
Nota: El orden es muy importante (por ejemplo, utilizando la escala de grises () antes de usar sepia () producirá una imagen completa de escala de grises).
-webkit-filtro: contraste (200% ) de brillo (150%); / * Chrome, Safari, Opera * /
Filtro: contraste (200%) de brillo (150%);
}
Trate »
Todos los ejemplos de filtro
El siguiente ejemplo muestra cómo utilizar todo el filtro:
-webkit-filtro: Falta de definición (4 píxeles) ;
Filtro: Falta de definición (4 píxeles);
}
.brightness {
-webkit-filtro: brillo (0,30) ;
Filtro: brillo (0,30);
}
.contrast {
-webkit-filtro: contraste (180% );
Filtro: contraste (180%);
}
.grayscale {
-webkit-filtro: escala de grises (100% );
filtro: escala de grises (100%);
}
.huerotate {
-webkit-filtro: hue-rotación ( 180 grados);
Filtro: hue-rotación (180 grados) ;
}
.invert {
-webkit-filtro: invertido (100% );
Filtro: invertido (100%);
}
.opacity {
-webkit-filtro: opacidad (50% );
Filtro: opacidad (50%);
}
.saturate {
-webkit-filtro: saturar (7) ;
filtro: saturar (7);
}
.sepia {
-webkit-filtro: sepia (100% );
Filtro: sepia (100%);
}
.shadow {
-webkit-filtro: las sombras paralelas ( 8 píxeles 8px 10px verde);
filtro: las sombras paralelas (8 píxeles 8px 10px verde);
}
Trate »
Artículos relacionados
HTML DOM Referencia: Estilo atribuye el filtro