Some text
color: rgba()
or color: hsla()
and CSS3 opacity
CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this property-name stands, for, you guessed it: alpha.
RGBa is a way to declare a color in CSS that includes alpha transparency support.
Some text
background: rgba(255, 255, 255, .5) center center;
The first three numbers represent the red, green and blue values and the last is the transparency from 0 (100% transparent) to 1 (no transparency). Below the alpha values go from .2 to 1 in .2 increments.
When you use opacity property on an element, say div { opacity: .9;}
, you set the
opacity for that element and all of its children, everything contained by the box. So if you simply
apply opacity to a div with a background-color of white, the text and images contained in that
div will inherit the opacity property and they will also be transparent.
Hue, Saturation, Lightness (Brightness in Photoshop) is often an easier, more human way to determine color numbers for designers.
Firefox 3+, Safari 3+, Opera 10, Google Chrome 1+, iPhone, Blackberry Storm
IE8 and below doesn't support the alpha in RGBa or HSLa, and color will be solid, except IE5.5
will have no color. (IE has a proprietary alpha filter that you can use in a conditional comment
in the <head>
.)
<!--[if lt IE 8]>
<style type="text/css">
.transparent {
filter:alpha(opacity=50);
}
</style>
<![endif]-->
IE8 and below do not support HSL color declaration, so you would have to either use a conditional comment for the color values in rgb or hex or a "fallback" declaration with rgb or hex colors.
If the design permits, you might declare a “fallback” color, using normal rgb or hex to define the property color and then declare the property again below it with rgba. This color will be solid. Not declaring a fallback means no color will be applied in browsers that don’t support it. This fallback does fail in some really old browsers.
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, .5) center center;
http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock/
http://www.css3.info/preview/rgba/
http://www.css3.info/introduction-opacity-rgba/
http://www.w3schools.com/Css/css_image_transparency.asp
http://forabeautifulweb.com/demo/2008/10/25/index.html
http://timvandamme.com/ networks navigation hover and active have different alpha on background color and also use transition.