Techie Tip of the Week: Setting Opacity with CSS3
Friday, July 20th, 2012With the advent of CSS3, you can now add opacity levels to your colors and backgrounds on your web site.
One way to add opacity is to use the opacity property:
background: [desired color]; opacity: [opacity level from 0 to 1 -- e.g., .5 is 50%];}
Another way is to use the new rgba (red, green, blue, alpha transparency) or the new hsla (hue, saturation, lightness, alpha transparency) properties:
background: rgba([amount red], [amount green], [amount blue], [alpha transparency level from 0 to 1]);}
background: hsla([amount hue], [amount saturation], [amount lightness], [alpha transparency level from 0 to 1]);}
For example:
