tutorial on the use of opacity properties in CSS3

Rgba and opacity

Grammar:

R: Red value. Positive integer | Percentage

G: Green value. Positive integer | Percentage

B: The blue value. Positive integer | Percentage

A: transparency. Between Values 0~1

CSS code copy content to clipboard

* IE6-8 * *

Filter:alpha (opacity=80);

* * Other * *

opacity:0.8;

RGBA is much more transparent than the element setting CSS, because individual colors can not affect the transparency of the entire element, he does not affect other attributes of the element, such as borders, and the font does not affect the transparency of other elements.

The use of opacity

The opacity declaration is used to set the transparency of an element: layers, text, pictures, etc. ... An element with a opacity value of 1 is completely opaque, whereas a value of 0 is completely transparent and invisible. Any value from 1 to 0 indicates the degree of transparency of the element.

Browser compatibility

Opacity is the best browser support CSS3 element ... Except ie!, of course.

CSS3 Transparent (example 1: Layer)

The above transparency example uses the following style:

CSS code copy content to clipboard

DIV.OPACITYL1 {background: #036; opacity:0.2; width:575px; height:20px;}

div.opacityl2 {background: #036; opacity:0.4; width:575px; height:20px;}

DIV.OPACITYL3 {background: #036; opacity:0.6; width:575px; height:20px;}

DIV.OPACITYL4 {background: #036; opacity:0.8; width:575px; height:20px;}

DIV.OPACITYL5 {background: #036; opacity:1.0; width:575px; height:20px;}

Browser support:

Firefox 3.05+

Google Chrome 1.0+

Internet Explorer 8-

Opera 9.6+

Safari 3.2.1+

CSS 3 Transparent (example 2: Picture)

We can also use transparent effects of different transparency on the picture, just like the example above. A cool application is to apply opacity to: hover, to implement a linked mouse effect.

CSS code copy content to clipboard

img.opacity1 {opacity:0.25; width:150px; height:100px;}

img.opacity2 {opacity:0.50; width:150px; height:100px;}

img.opacity3 {opacity:0.75; width:150px; height:100px;}

Browser support:

Firefox 3.05+

Google Chrome 1.0.154+

Internet Explorer ie8-

Opera 9.6+

Safari 3.2.1+