Explanation: These CSS declarations allow you to control the transparency of an object (for example, a division or image). There are multiple approaches in CSS-3.
- opacity (also thought of as an alpha value measured from 0.0 – 1.0, the former being invisible)
- rgba (measured as red, green, blue values from 0 – 255 with an alpha ranging from 0.0 to 1.0)
- hsla (hue is measured in degrees [from 0 – 360], saturation and lightness are measured from 0% – 100%, and the alpha value ranges from 0.0 to 1.0)
Example CSS code:
.boxrgba {
width:200px;
height:200px;
background:rgba(0,0,0,0.5);
color:rgba(255,255,255,1);
}
.boxhsla {
width:200px;
height:200px;
background:hsla(0,45%,35%,0.5);
color:hsla(31,34%,44%,1);
}
Example page (view the source code): http://learning-html5.info/CSS3/CSS_Opacity.html (works in most modern browsers).
References:
- lynda.com tutorials
Loading ...