Filter:alpha transparency using in CSS

Filter:alpha transparency using in CSS
Use filter to set the transparency, filter:alpha in IE is no problem, to support Firefox need to use-moz-opacity, there is a good example, we can refer to the following

Opacity: Transparency level, range is 0-100, 0 is fully transparent, and 100 is completely opaque.
Finishopacity: When you set the transparency effect of a gradient, you specify the transparency at the end, ranging from 0 to 100.
Style: Sets the style of the gradient transparency, with a value of 0 for the uniform shape, 1 for the line, 2 for the radial, and 3 for the rectangle.
StartX and Starty: Represents the start x and y coordinates of the gradient transparency effect.
Finishx and Finishy: represents the coordinates of the gradient transparency effect ending with x and Y.
There is no problem with the above method for IE. To support Firefox, please refer to the following:

    Filter:alpha (OPACITY=50); /* IE */    -moz-opacity:0.5;/* Moz + FF */    

Simply explained, IE uses private attribute filter:alpha (opacity), Moz family uses private attribute-moz-opacity, while the standard attribute is opacity (CSS 3, Moz family section supports CSS3). The values that follow are transparency, using percentages or decimals (alpha (opacity)) to use values greater than 0 and less than 100, which are actually percentages.




About the extension of filter
One, CSS3 filter
CSS3 filter is a filter defined in the CSS Filter Effect 1.0, which uses CSS to change the blur, brightness, contrast, saturation, and so on for images and HTML.

Second, how to use:
Filter:filter (value);
Filter:filter (value) filter (value);/* Multi-attribute */

Third, specific examples
1, Blur (fuzzy)
Image blur parameter unit: px/em/pt. Example:

Filter:blur (5px);
-webkit-filter:blur (5px);
-moz-filter:blur (5px);
-o-filter:blur (5px);
-ms-filter:blur (5px);

2, brightness (brightness)
Luminance parameter: " -1″ to" 1″, the higher the value, the greater the brightness. Example:

Filter:brightness (0.5);
-webkit-filter:brightness (0.5);
-moz-filter:brightness (0.5);
-o-filter:brightness (0.5);
-ms-filter:brightness (0.5);

3, saturation (saturation)
Saturation parameter: Half-ratio, with 100% as the middle value. Example:

Filter:saturate (50%);
-webkit-filter:saturate (50%);
-moz-filter:saturate (50%);
-o-filter:saturate (50%);
-ms-filter:saturate (50%);

4, Hue Rotate (hue)
Hue parameter: Angle value 0-360. Example:

Filter:hue-rotate (180DEG);
-webkit-filter:hue-rotate (180DEG);
-moz-filter:hue-rotate (180DEG);
-o-filter:hue-rotate (180DEG);
-ms-filter:hue-rotate (180DEG);

5. Contrast (contrast ratio)
Contrast parameter: a percentage, with a median of 100%. Example:

Filter:contrast (50%);
-webkit-filter:contrast (50%);
-moz-filter:contrast (50%);
-o-filter:contrast (50%);
-ms-filter:contrast (50%);

6. Invert (Reversed phase)
Inverse parameters: percent; 0%-100%. Example:

Filter:invert (100%);
-webkit-filter:invert (100%);
-moz-filter:invert (100%);
-o-filter:invert (100%);
-ms-filter:invert (100%);

7, Grayscale (grayscale)
Grayscale parameters: Percent 0%-100%. Example:

Filter:grayscale (100%);
-webkit-filter:grayscale (100%);
-moz-filter:grayscale (100%);
-o-filter:grayscale (100%);
-ms-filter:grayscale (100%);
Sepia (Nostalgia)

8, Sepia (Nostalgia)
Nostalgia parameter: Percent 0%-100%. Example:

Filter:sepia (100%);
-webkit-filter:sepia (100%);
-moz-filter:sepia (100%);
-o-filter:sepia (100%);
-ms-filter:sepia (100%);

Filter:alpha transparency using in CSS