# Exploring Opacity Step-by-Step with CSS3

**URL:** <https://forum.kirupa.com/t/exploring-opacity-step-by-step-with-css3/165652>\
**Category:** random\
**Created:** [October 12, 2005, 8:40pm UTC](https://forum.kirupa.com/t/exploring-opacity-step-by-step-with-css3/165652 "2005-10-12T20:40:00Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![idoik](https://avatars.discourse-cdn.com/v4/letter/i/97f17d/32.png) [@idoik](https://forum.kirupa.com/u/idoik)\
**Post date:** [October 12, 2005, 8:40pm UTC](https://forum.kirupa.com/t/exploring-opacity-step-by-step-with-css3/165652/1 "2005-10-12T20:40:00Z")

</div>

Exploring Opacity Step-by-Step

[http://www.mandarindesign.com/opacity.html](http://www.mandarindesign.com/opacity.html)

W3C SAYS…

Opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the element (including its children) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.

Name: opacity  
Value: \<alphavalue\> | inherit  
Initial: 1  
Applies to: all elements  
Inherited: no  
Percentages: N/A  
Media: visual  
Computed value: The same as the specified  
value after clipping the \<alphavalue\>  
to the range [0.0,1.0].

\<alphavalue\>  
Syntactically a \<number\>. The uniform opacity setting to be applied across an entire object. Any values outside the range 0.0 (fully transparent) to 1.0 (fully opaque) will be clamped to this range. If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is \<alphavalue\>.