-
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.
I totally agree with Wiiboy Brown. Thankfully, I just came across this workaround for IE:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
The reason this works is because Alpha channels are supported in IE filters.
-
36.
I figured out one other difrence between opacity and RGBA.
With opacity also element’s borders will get opacity, but with RGBA they wont.
The way to set opacity to borders with RGBA is to set border-color property by using RGBA value. -
37.
IE6 is in the process of dying a very slow death. Looking at web stats for clients and am noticing an astonishing amount of surfers using compliant browsers.
-
38.
Haven’t tried this out myself yet on a live site, but this looks interesting: http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/
-
39.
Webbdesign trender #3: Transparenta bakgrunder och effekter | Webbrelaterat says:Comment » June 17th, 2009 at 11:20 am
[…] En introduktion om Opacity and RGBA […]
-
40.
rgbahover.js - An animated mouseover effect using CSS3 and javascript | Andy Dust - Web Developer says:Comment » August 6th, 2009 at 10:33 pm
[…] for creating a mouseover highlight effect with zero extra markup by using the CSS3 properties rgba, border-radius and box-shadow. You can download the script here and read more here on the project […]
-
41.
It looks like your example images are missing now…
-
42.
-
43.
Is there any way to not have blue as the background? I want to have a white transparent outer wrapper background in front of my main background. I was able to get a grey-brown, but with colors, I cannot get white.
-
44.
CSS3 – Still Missing Functionality… on Purpose! » The Blog of Brandon Frohs » Nonsensical Madness says:Comment » January 3rd, 2010 at 9:54 pm
[…] argument may have been true, but now we can declare a background color (or any other color) with RGBA. This makes it possible to set a background color with any opacity. Just imagine the possibilities! […]
-
45.
[…] the latest versions of Safari and (to a slightly lesser extent) Firefox. Transitions, rotation, opacity, shadows, and rounded corners are just some of what’s possible now, but as Cederholm’s […]
-
46.
[…] RGBA makes setting background opacity easier. I think more designers are going to take advantage of this feature to create semi-transparent effect. […]
-
47.
2010 web tasarım eğilimleri « Bay Bedava – Netten Başlıklar says:Comment » January 23rd, 2010 at 12:21 am
[…] rbga ve matlık rgba kolay arka plan ve saydamlık ayarını yapar. tasarımcılar bu özellikten dolayı […]
-
48.
Design Predictions / Trends in 2010 :: Reflex Stock Photo Blog says:Comment » January 25th, 2010 at 6:26 pm
[…] RGBA makes setting background opacity easier. I think more designers are going to take advantage of this feature to create semi-transparent effect. […]
-
49.
[…] RGBA使得设定字体更加简单. 我想更多的设计者正打算好好利用这个特性来创建半透明效果. […]
-
50.
i have a doubt shall i use rgba for mozilla and opacity for IE is it possible
-
01.
