Use CSS filters to add special effects to images

Sometimes, we need to add some special effects to images on the webpage, such as transparency, distortion, shadow, or flip. We generally think of using Photoshop and other graphic software for processing, in fact, we can also use some filters provided by CSS (stacked style table) for processing. This is a good thing for users who are not familiar with Photoshop.
 
Let's start with a few filters without parameters.
1. Gray filter
The Gray filter is used to produce black and white effects.
Usage:
The effect is shown in the following figure:
 
2. Invert filter
The Invert filter is used for reversed colors.
Usage:
The effect is shown in the following figure:
 
3. Xray filter
The Xray filter is used to produce the X-ray effect.
Usage:
The effect is shown in the following figure:
 
4. fliph and flipv
The fliph filter is used to generate a horizontal flip effect. The flipv filter is used to generate a vertical flip effect.
Usage: or
The effect is shown in the following figure:
 
     
Next, we will introduce several complicated filters:
 
5. alpha filter
The alpha filter is mainly used to process the image transparency.
Usage:
Note: value1 is the transparency value of the image. The value range is 0 (completely transparent )~ 100 (completely opaque)
Value2 is the transparency value at the end of the image transparency transformation. The value range is 0 (completely transparent )~ 100 (completely opaque) Note: This value is valid only when value3 is set.