-
200614 Jun
Posted in Declarations
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.
You can skip to the end and leave a response.
-
Comments
-
01.
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?
-
02.
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.
-
03.
In their defence as well: they are trying hard, IE7 is a lot better, and they have committed themselves to keep upgrading it.
-
04.
-
05.
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
-
06.
[...] A brief introduction to Opacity and RGBA - css3.info [...]
-
07.
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?
-
08.
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.
-
09.
>> 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?
-
10.
eli says:Comment » November 6th, 2007 at 5:45 am
IE 7 sux. so forget about it and download a real browser
-
11.
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.
-
12.
Design by Elle » Blog Archive » CSS3 Properties to Wait For says:Comment » February 11th, 2008 at 4:00 am
[...] Peter, (2006), A Brief Introduction to Opacity and RGBA on CSS3.info. Accessed on Feb 11, [...]
-
13.
It is not working in IE7 so we will have to wait for next IE version.
-
14.
“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
-
15.
[...] 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. [...]
-
16.
Romuald says:Comment » March 17th, 2008 at 11:54 am
Furthermore, using rgba() colors will let you assign transparency to the text itself, or borders for example. While letting the background-color unchanged.
-
17.
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.
-
18.
zzzombie » Blog Archive » Safari 3.1 est devenu la référence says:Comment » March 20th, 2008 at 12:29 pm
[...] Les couleurs RBGA [...]
-
19.
[...] Noted for (mostly for my) future CSS reference: using Opacity vs RGBA. [...]
-
20.
Adam Klinges says:Comment » March 27th, 2008 at 1:56 am
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.
-
21.
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 ;-)
-
22.
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!?
-
23.
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 ;-)
-
24.
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.
-
25.
phil says:Comment » May 22nd, 2008 at 8:59 pm
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.
-
26.
-
27.
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).
-
28.
[...] Jedna od najjačih stvari CSS3 je opacity. Dok IE6 ne može ni podržati .png kojim smo prije rješavali ovaj problem, ipak može riješiti opacity. Zapravo, ovo je jedna od rijetkih stvari u kojoj IE rula već duže vrijeme. Za one koji ne znaju što je opacity, to je transparentnost. Potpuni vodič o ovoj mogućnosti možete naći ovdje. [...]
-
29.
ویژگیهای جدید در CSS 3 بخش دوم « نوشته های یک برنامه نویس says:Comment » October 15th, 2008 at 8:49 pm
[...] برای مطالعه پیرامون Opacity و رنگها به این مقاله مراجعه کنید: A brief introduction to Opacity and RGBA [...]
-
30.
[...] Test, ob im Browser schon die beiden Arten von “durchsitigkeit” funktionieren (die Peter Gasston hier beschreibt) Hintergrund ist grün Rote box mit opacity: 0.5: auch die Schrift hat Opacity. Rote box mit [...]
-
31.
Paul Schroeder says:Comment » November 29th, 2008 at 4:17 pm
I’ve been using “filter: alpha(opacity:50);” in my cascading style sheets with IE7 for 4 years, and it works perfectly. 100 is fully opaque; 0 is transparent.
-
32.
For Paul.
Yes, but filter:alpha (opacity and -moz-opacity as well) is different then this feature.
While they both deal with transparency, filter:alpha (and the css\mozilla equivs) makes the entire element transparent including its nested elements needing more css\html to accomplish what this can do.
In particular:
#elm { background-color:rgba(0,0,255,0.5); }
would only make the background transparent while the text inside it would be completely solid. Very cool feature.
#elm { filter:alpha(opacity:50); opacity:.5; -moz-opacity:.5; }
would make #elm 50% transparent, including the text and nested elements.
Thats what makes RGBA so sweet.
-
33.
Is CSS3 RGBa ready to rock? (screencast) « Kashif Mehmood Mughal says:Comment » December 7th, 2008 at 11:03 pm
[...] CSS3.info explained so well, way back in June 2006, when you apply an opacity value to an element, say { opacity : .9; [...]
-
34.
“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.”
The problem with this is that the majority of users use IE, and no average user is going to think to themselves, “Oh, this website looks weird. Stupid Internet Explorer!” The first thing they blame is the site. If 70% of users can’t see your site properly, then your alienating 70% of people. Look at any real professional site. If you’ve got a large userbase, like a business might, you have to design for IE first, other browsers 2nd.
I’m all for standards, and I hate Microsoft just as much as you do. But, I don’t think its wise to design a site so it looks bad on the most popular browser, and expect users to realize that its the browser causing the problem.
BTW, I’m writing this in the best (stable, Chrome is good, too) browser I know, Firefox! -
35.
-
01.
TAG CLOUD
acid3
advanced layout
background
border
Browsers
color
css
CSS3.info
CSS3.info
csswg
CSS WG
developer tools
disabled
dom
enabled
feedback
firefox
firefox 3.1
fonts
generated content
grid positioning
hixie
HSLA
HTML5
ie6
ie7
ie8
jina bolton
media player
Opera
Opera Dragonfly
presentations
RGBA
safari
selectors
slides
SVG
text rendering
UI
W3C
wasp
Web Fonts
webkit
windows
Leave a Comment