img {
-webkit-filter: escala de grises (100%); / * Chrome, Safari, Opera * /
filter: escala de grises (100%);
}
Función de filtro
Nota: El filtro generalmente usa un porcentaje (como: 75%), por supuesto, también se puede expresar usando decimales (como: 0.75).
| Filtrar | Descripción |
|---|---|
| ninguna | El valor predeterminado no tiene efecto. |
| desenfoque ( px ) | Establezca Gaussian Blur en la imagen. El valor de "radio" establece la desviación estándar de la función gaussiana, o cuántos píxeles se fusionan en la pantalla, por lo que cuanto mayor sea el valor, más borrosa; si no hay un valor establecido, el valor predeterminado es 0; este parámetro puede establecer el valor de longitud css, pero No se aceptan valores porcentuales. |
| brillo ( % ) | Aplique 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 será completamente negra. Si el valor es 100%, no hay cambio en la imagen. Los otros valores corresponden al efecto multiplicador lineal. También son posibles valores superiores al 100%, la imagen será más brillante que antes. Si no hay un valor establecido, el valor predeterminado es 1. |
| contraste ( % ) | Ajusta el contraste de la imagen. Si el valor es 0%, la imagen será completamente negra. El valor es 100% y la imagen no cambia. Los valores pueden superar el 100%, lo que significa que se utilizará un contraste más bajo. Si no se establece ningún valor, el valor predeterminado es 1. |
| sombra paralela ( h-shadow v-shadow blur color desplegado ) | Establecer un efecto de sombra en la imagen. Las sombras se sintetizan debajo de la imagen y pueden tener imágenes borrosas, una versión offset del mapa de máscara que se puede dibujar en un color específico. La función acepta valores de tipo <sombra> (definidos en el fondo CSS3), excepto que la palabra clave "inserción" no está permitida. Esta función es muy similar a la propiedad box-shadow box-shadow existente; la diferencia es que a través de los filtros, algunos navegadores proporcionan aceleración de hardware para un mejor rendimiento.
Nota: Webkit y algunos otros navegadores no admiten la cuarta longitud y no se mostrarán si se agregan. <color> (Opcional) Verifique las posibles palabras clave y etiquetas para este valor. Si no se establece, el valor del color se basa en el navegador. En Gecko (Firefox), Presto (Opera) y Trident (Internet Explorer), se aplica el valor del atributo color color . Además, si se omite el valor del color, la sombra en WebKit es transparente. |
| escala de grises ( % ) | Convierta la imagen en una imagen en escala de grises. El valor define la escala de la conversión. Un valor del 100% se convierte por completo en una imagen en escala de grises, y un valor del 0% no tiene cambios en la imagen. Los valores entre 0% y 100% son multiplicadores lineales del efecto. Si no se establece, el valor predeterminado es 0; |
| tono-rotar ( grados ) | Aplicar rotación de tono a la imagen. El valor de "ángulo" establece el valor del ángulo del círculo de color en el que se ajustará la imagen. Si el valor es 0deg, no hay cambio en la imagen. Si no se establece el valor, el valor predeterminado es 0deg. Aunque este valor no tiene un valor máximo, un valor superior a 360 grados es equivalente a otra ronda. |
| invertir ( % ) | Invierta la imagen de entrada. El valor define la escala de la conversión. El 100% del valor está completamente invertido. Un valor de 0% significa que no hay cambios en la imagen. Los valores entre 0% y 100% son multiplicadores lineales del efecto. Si no se establece el valor, el valor predeterminado es 0. |
| opacidad ( % ) | Transforma la transparencia de la imagen. El valor define la escala de la conversión. Un valor de 0% significa transparencia total y un valor de 100% significa que no hay cambios en la imagen. Los valores entre 0% y 100% son multiplicadores lineales del efecto, que también es equivalente a multiplicar el número de muestras de imágenes. Si no se establece el valor, el valor predeterminado es 1. Esta función es muy similar a la propiedad de opacidad existente, la diferencia es que a través del filtro, algunos navegadores proporcionarán aceleración de hardware para mejorar el rendimiento. |
| saturar ( % ) | Convierte la saturación de imagen. El valor define la escala de la conversión. Un valor de 0% significa completamente insaturado, y un valor de 100% significa que no hay cambios en la imagen. Otros valores son multiplicadores lineales del efecto. Se permiten valores superiores al 100% y hay un mayor grado de saturación. Si no se establece el valor, el valor predeterminado es 1. |
| sepia ( % ) | Convierte la imagen a sepia. El valor define la escala de la conversión. Un valor del 100% es completamente marrón oscuro, y un valor del 0% no cambia la imagen. Los valores entre 0% y 100% son multiplicadores lineales del efecto. Si no se establece, el valor predeterminado es 0; |
| url () | La función URL acepta un archivo XML, que establece un filtro SVG, y puede contener un punto de anclaje para especificar un elemento de filtro específico. Por ejemplo: filtro : url ( svg - url # id-elemento) |
| inicial | Establezca la propiedad en el valor predeterminado, consulte: palabra clave inicial CSS |
| heredar | Para heredar este atributo del elemento padre, consulte: CSS heredar palabra clave |