CSS3 Filters (Filters)

CSS3Filter effects provide a simple method to apply visual effects to images.

Understand CSS3Filter functions

In this chapter, we will discuss CSS3introduced filter effects, and you can perform visual effects operations on graphic elements such as images before applying filter effects to web pages, such as blurring, balancing contrast or brightness, color saturation, etc.

You can use CSS3 The filter property applies filter effects to elements, which accepts one or more filter functions in the order provided. An example usage is as follows:

filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url();

Warning:Any version of Internet Explorer currently does not support CSS3Filter effects. Older versions of IE support the non-standard filter property to create effects such as opacity, but this feature has been deprecated.

Blur effect

Similar to Gaussian blur effects in Photoshop, the blur() function can be applied to elements using this filter. This function accepts CSS length values as parameters to define the blur radius. Larger values will produce more blur. If no parameter is provided, the value 0 is used.

img　{
　　　　-webkit-filter: blur(5px);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: blur(5px);
}

La salida del ejemplo anterior se muestra a continuación:

Set the image brightness

The brightness() function can be used to set the brightness of the image. A value of 0% will create a completely black image. While the value100% o1Keep the image unchanged. Other values are linear multipliers of the effect.

You can also set the brightness to higher100%, which can make the image brighter. If the quantity parameter is missing, use the value1. Negative values are not allowed.

img.bright　{
　　　　-webkit-filter: brightness(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: brightness(200%);
}
img.dark　{
　　　　-webkit-filter: brightness(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter: brightness(50%);
}

La salida del ejemplo anterior se muestra a continuación:

Adjust the image contrast

The contrast() function is used to adjust the contrast of the image. A value of 0% will create a completely black image. While the value100% o1Keep the image unchanged. It also allows over100% value, thus providing a result with low contrast. If the quantity parameter is missing or omitted,1then use the value.

img.bright　{
　　　　-webkit-filter:  contrast(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:  contrast(200%);
}
img.dim　{
　　　　-webkit-filter:  contrast(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:  contrast(50%);
}

La salida del ejemplo anterior se muestra a continuación:

para agregar sombras a la imagen

Puede usar la función drop-La función shadow() aplica el efecto de sombra a imágenes como Photoshop. Esta función es similar a labox-shadowAtributos.

img　{
　　　　-webkit-filter:  drop-shadow(4px　4px　10px  naranja);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:  drop-shadow(4px　4px　10px  naranja);
}

La salida del ejemplo anterior se muestra a continuación:

Convertir la imagen en escala de grises

Se puede usar la función grayscale() para convertir la imagen en escala de grises. El valor10El 0% es completamente en escala de grises. Un valor del 0% mantiene la imagen inalterada. Entre el 0% y10El 0% es el multiplicador lineal del efecto. Si falta el parámetro de cantidad, se utiliza el valor 0.

img.complete-gray　{
　　　　-webkit-filter:  grayscale(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:  grayscale(100%);
}
img.partial-gray　{
　　　　-webkit-filter:  grayscale(50%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:  grayscale(50%);
}

La salida del ejemplo anterior se muestra a continuación:

Aplicar un giro de tono en la imagen

Este tono-La función rotate() aplica un giro de tono a la imagen. Los parámetros pasados definen los grados alrededor del anillo cromático del sample de la imagen. El valor 0deg mantiene la imagen inalterada. Si falta el ángulo' ' parámetro, 0deg se utiliza el valor. No hay valor máximo, el efecto de los valores anteriores se360deg retroalimentación.

img.hue-normal　{
　　　　-webkit-filter:  hue-rotate(150deg);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:  hue-rotate(150deg);
}
img.hue-wrap　{
　　　　-webkit-filter:  hue-rotate(480deg);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:  hue-rotate(480deg);
}

La salida del ejemplo anterior se muestra a continuación:

Efecto de inversión

Se puede usar la función invert() para aplicar efectos de inversión como en Photoshop a la imagen. 100% o1El valor se invierte completamente. Un valor del 0% mantiene el input inalterado. Del 0% al10El valor entre el 0％ es el multiplicador lineal del efecto. Si falta el parámetro "amount", se utiliza el valor 0. No se permiten valores negativos.

img.partially-inverted　{
　　　　-webkit-filter:  invert(80%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:  invert(80%);
}
img.fully-inverted　{
　　　　-webkit-filter:  invert(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:  invert(100%);
}

La salida del ejemplo anterior se muestra a continuación:

Aplicar opacidad a la imagen

La función opacity() se puede usar para agregar transparencia a la imagen. El valor 0% es completamente transparente. El valor100% o1Mantener la imagen inalterada. El valor entre el 0% y100% es el multiplicador lineal del efecto. Si falta el ' cantidad'parámetros, utilice el valor1。Esta función es similar a laopacityAtributos.

img　{
　　　　-webkit-filter:  opacity(80%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:  opacity(80%);
}

La salida del ejemplo anterior se muestra a continuación:

Aplicar el efecto marrón oscuro a la imagen

La función sepia() convierte la imagen en tono sepia. El valor100% o1es completamente marrón oscuro. El valor 0% mantiene la imagen sin cambios. Entre el valor 0% y100% es el multiplicador lineal del efecto. Si falta el ' cantidad'parámetros, utilice el valor 0.

img.complete-sepia　{
　　　　-webkit-filter:　sepia(100%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　sepia(100%);
}
img.partial-sepia　{
　　　　-webkit-filter:　sepia(30%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　sepia(30%);
}

La salida del ejemplo anterior se muestra a continuación:

Ajustar la saturación de la imagen

La función saturate() se puede usar para ajustar la saturación de la imagen. El valor 0% es completamente insaturado. El valor100% mantiene la imagen sin cambios. Otros valores son multiplicadores lineales del efecto. También se permite que los valores sean superiores100％，lo que proporciona un resultado super saturado. Si falta el 'cantidad 'parámetros, utilice el valor1。

img.un-saturated　{
　　　　-webkit-filter:　saturate(0%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(0%);
}
img.super-saturated　{
　　　　-webkit-filter:　saturate(200%);　/*　Chrome,　Safari,　Opera　*/
　　　　filter:　saturate(200%);
}

La salida del ejemplo anterior se muestra a continuación: