CSSPropiedad de filtro


Sintaxis

  • filtro: ninguno (valor predeterminado)
  • filtro: inicial (predeterminado en ninguno);
  • filtro: heredar (por defecto al valor principal);
  • filtro: desenfoque (px)
  • filtro: brillo (numero |%)
  • filtro: contraste (número |%)
  • filtro: sombra-sombra (sombra horizontal-sombra-vertical-sombra-px sombra-desenfoque-sombra-sombra - color de propagación)
  • filtro: escala de grises (número |%)
  • filtro: hue-rotate (grados)
  • filtro: invertido (número |%)
  • filtro: opacidad (número |%)
  • filtro: saturar (número |%)
  • filtro: sepia (numero |%)

Parámetros

Valor Descripción
difuminar (x) Difumina la imagen por x píxeles.
brillo (x) Ilumina la imagen en cualquier valor por encima de 1.0 o 100%. Debajo de eso, la imagen se oscurecerá.
contraste (x) Proporciona más contraste con la imagen en cualquier valor por encima de 1.0 o 100%. Debajo de eso, la imagen se saturará menos.
sombra paralela (h, v, x, y, z) Da a la imagen una sombra paralela. hyv pueden tener valores negativos. x, y, yz son opcionales.
escala de grises (x) Muestra la imagen en escala de grises, con un valor máximo de 1.0 o 100%.
hue-rotate (x) Aplica una rotación de tono a la imagen.
invertir (x) Invierte el color de la imagen con un valor máximo de 1.0 o 100%.
opacidad (x) Establece la opacidad / transparencia de la imagen con un valor máximo de 1.0 o 100%.
saturar (x) Satura la imagen en cualquier valor por encima de 1.0 o 100%. Debajo de eso, la imagen comenzará a desaturarse.
sepia (x) Convierte la imagen en sepia con un valor máximo de 1.0 o 100%.

Observaciones

  1. Dado que el filtro es una función experimental, debe usar el prefijo -webkit. Puede cambiar la sintaxis y el comportamiento, pero los cambios probablemente serán pequeños.

  2. Puede que no sea compatible con versiones anteriores de los principales navegadores. Puede que no sea totalmente compatible con los navegadores móviles.

  3. Debido a su soporte relativamente limitado, intente usar box-shadow lugar de filter: drop-shadow() . Usa la opacity lugar del filter: opacity() .

  4. Se puede animar a través de Javascript / jQuery. Para Javascript, use object.style.WebkitFilter .

  5. Compruebe W3Schools o MDN para más información.

  6. W3Schools también tiene una página de demostración para todos los diferentes tipos de valores de filtro.

Propiedad de filtro Ejemplos relacionados