The declaration ‘opacity’ sets the value to how opaque an elements is: layer, text, image, etc… An element with opacity value 1.0 will be fully opaque (visible) while an element with opacity value 0.0 will be the complete opposite, invisible. Any value inbetween will determine how opaque (or transparent) the element is.

CSS 3 Opacity

1. CSS 3 Opacity (Example 1)
2. div.L1 { background:#036; opacity:0.2; width:575px; height:20px; }
3. div.L2 { background:#036; opacity:0.4; width:575px; height:20px; }
4. div.L3 { background:#036; opacity:0.6; width:575px; height:20px; }
5. div.L4 { background:#036; opacity:0.8; width:575px; height:20px; }
6. div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }

CSS 3 Opacity (Example 2 : Images)

We can also apply different levels of opacity to images as in the above example. I actually used levels of opacity on my website some years ago now for a gallery and it worked really quite nicely, with a slightly opaque image that on :hover, reached 100% opacity . I will be quite glad if this now makes into the w3c standards.

1. CSS 3 Opacity (Example 1)
2. img.1 { opacity:0.25; width:150px; height:100px; }
3. img.2 { opacity:0.50; width:150px; height:100px; }
4. img.3 { opacity:0.75; width:150px; height:100px; }