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 (Example 1 : Layers)
The above opacity example is set in another layer containing a completely random, never seen before background and each layer uses the following CSS:
- CSS 3 Opacity (Example 1)
- div.L1 { background:#036; opacity:0.2; width:575px; height:20px; }
- div.L2 { background:#036; opacity:0.4; width:575px; height:20px; }
- div.L3 { background:#036; opacity:0.6; width:575px; height:20px; }
- div.L4 { background:#036; opacity:0.8; width:575px; height:20px; }
- div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }
Current Browser Support
- FireFox (3.0.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8..)
- Opera (9.6)
- Safari (3.2.1, Windows)
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.
- CSS 3 Opacity (Example 1)
- img.1 { opacity:0.25; width:150px; height:100px; }
- img.2 { opacity:0.50; width:150px; height:100px; }
- img.3 { opacity:0.75; width:150px; height:100px; }
Current Browser Support
- FireFox (3.0.5)
- Google Chrome (1.0.154.36)
- Internet Explorer (IE6, IE7, IE8..)
- Opera (9.6)
- Safari (3.2.1, Windows)
