Filter:alpha transparency using in CSS

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.