A brief introduction to Opacity and RGBA
The Opacity declaration sets how opaque an element is. An opacity value of 1 means the element is fully opaque; an opacity value of 0 means an element is not at all opaque, i.e. fully transparent.
div { background-color: rgb(255,0,0); opacity: 1; }
Webkit, Gecko and Opera browsers all support Opacity.
The RGBA declaration allows you to set opacity (via the Alpha channel) as part of the color value.
div { background-color: rgba(255,0,0,1); }
This is supported in Webkit and the first alpha of Firefox 3.
The key difference between the two declarations is this:
Opacity sets the opacity value for an element and all of its children;
RGBA sets the opacity value only for a single declaration.
Here’s an example.
background-color: rgb(0,0,255); opacity: 0.5;
The background color of the second div has been set to blue, and the opacity set to half. The text inside the div has inherited the opacity value from its parent, and you can see the yellow div showing through.
background-color: rgba(0,0,255,0.5);
The background color has been set to blue, and the opacity set to half. The text inside the div does not inherit the opacity value, as it acts solely on the background-color declaration, so the text does not reveal the yellow div behind.
What will the support of IE be for this new property? It seems that all the standards-supported browsers such as safari, firefox, and opera are following suit. But when will we see IE being better supported by CSS?
The support in IE? Nothing. IE7 barely brings support up to CSS2, so it will be a long time before CSS3 is seen.
In their defence, CSS3 is not a W3C recommendation yet; however, it would be nice to see them be a little more proactive.
In their defence as well: they are trying hard, IE7 is a lot better, and they have committed themselves to keep upgrading it.
So CSS 2.0 is still barely supported by IE?
Sorry, let me correct that; the majority of CSS2 is now supported, but not all of it; no generated content, no {display: table} (etc). CSS2.1 (and even a few CSS3) selectors are much improved. It’s a lot better than IE6, but a long way off Safari, Opera and Mozilla (et al).
See here: http://css-discuss.incutio.com/?page=IE7
[...] A brief introduction to Opacity and RGBA - css3.info [...]
So let me get this straight. CSS3 has been nocking around for months and yet so called “Industry Leader” microsoft doesn’t support it.
This seems insane to me that a company such as microsoft want to hold back our development.
Do they not realise that this is just going to make every proud web designer in the world convince their associates to use Firefox/Opera/Etc. So IE7 is just a sly way of jumping on the PNG & Tabbed browsing bandwaggon… Finally?
Not exactly; CSS3 is still mostly in the discussion stage, although some of the new features - opacity, multi-column layouts, curved borders - have already been implemented by Firefox, Safari, Opera and Konqueror. IE7 does include a few CSS3 selectors, but in the main it just irons out some of the bugs in IE6’s CSS2 support.
>> So IE7 is just a sly way of jumping on the PNG & Tabbed browsing bandwaggon
…except the tabs are overly “intuitive” which makes them annoying to use for the experienced user. That and PNG gamma correction, which wasn’t as big of a deal as alpha-transparency, still hasn’t been fixed.
Can Microsoft just *not* make a web browser?
IE 7 sux. so forget about it and download a real browser
Too bad that the alpha parameter is a float between 0.0 and 1.0!
This makes js color handling a little more difficult than it would have been with another integer component in the range 0-255.
I suppose this is for compatibility with the opacity property.
[...] Peter, (2006), A Brief Introduction to Opacity and RGBA on CSS3.info. Accessed on Feb 11, [...]
It is not working in IE7 so we will have to wait for next IE version.
“It is not working in IE7 so we will have to wait for next IE version.”
What a great pain that is. Will I’ll just use it, most of my users use firefox anyway
[...] Image Abuse Although CSS sprites make things a bit easier, we’re still churning out those rounded corner and drop shadow graphics, and we do some funky things with PNG-24s where we could instead be using the rgba declaration. [...]
Furthermore, using rgba() colors will let you assign transparency to the text itself, or borders for example. While letting the background-color unchanged.
Sweet, will lead to cleaner HTML. Now I have to do workarounds with z-index and wrapper divs. The problems start when the container with the background color is of variable height.
[...] Les couleurs RBGA [...]
[...] Noted for (mostly for my) future CSS reference: using Opacity vs RGBA. [...]
Having these new features in CSS3 is great and does beat using images where there are rounded corners or drop shadows. But the biggest problem I see is that when supporting all browsers used by any user, you can’t use the new features of CSS3 because there are so many other browsers that don’t support this at all. It is ridiculous to developers that people still use IE6, but people sadly a lot of people still use it.
Why not use these features where you can for gecko based/webkit browsers and IE just won’t display them? Then at least some people will benefit and the IE crowd just won’t know any different, everyone’s a winner ;-)
What’s up with the people saying if IE doesn’t support it, they won’t use it? Have you done any exciting web development in the past ten years!?
Good point Brian, everyone needs to start looking forwards in terms of front end design, being held back by poorly implemented browsers is gonna hold everyone back ;-)
Good said Brian,
I have never avoided using PNG backgrounds just because they appear bogus under IE6, or CSS2.1 selectors, or…
In my opinion, IE users should be educated to understand why the websites look weird, then they could choose whether sticking to their flawed browser or choosing something better. This is the only way to push for the adoption of web standards.
Of course I am a Mac developer so my opinion is biased. I currently have 75% of Safari users and a bare 20% of Mozilla users.
yeah i’m all for telling users to use a real browser - and while we’re at it - safari is looking nice on pc even, but it doesn’t support the overflow property correctly. bad.
The images with the examples don’t work anymore.
IE7 is where its at. Although I can’t wait to havae fun with some of the CSS3 improvements, especially this one, RGBA. Make things a lot easier on all browsers for transparent backgrounds. Safari is cool, although not a Mac fan (love my eight button mouse of pain).