-
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
-
51.
The Blog of Richard Milne » A word about browsers and standards. says:Comment » February 26th, 2010 at 4:30 am
[...] only things I’m using that aren’t fully standards compliant are border-radius, and the rgba color model. I’ve been using border radius for a while now in a lot of my websites, but this [...]
-
52.
Goksel Eryigit - Front-end Developer » CSS3 Background Opacity says:Comment » March 28th, 2010 at 11:44 am
[...] For more about CSS and RGBA go to http://www.css3.info/introduction-opacity-rgba/ [...]
-
53.
[...] RGBA makes setting background opacity easier. I think more designers are going to take advantage of this feature to create semi-transparent effect. [...]
-
54.
when border-color is set to an rgba value with opacity of not 1, it reveals the background of the bordering element. I thought border is outside of the element…
any ideas?
-
55.
[...] RGBA makes setting background opacity easier. I think more designers are going to take advantage of this feature to create semi-transparent effect. [...]
-
56.
Are you kidding? IE is terrible and probably won’t support proper CSS for years… For now, I’ll be stuck with bad ie hacks that don’t work well.
And of course, a big “Download Firefox” button for everyone who’s using IE.
-
57.
-
58.
IE have a lot of support over Filter property but still, it’s not terrible. IE is a disaster! Right now I am building with my friends social media service fully with CSS3 and IE, well… We will ban IE browser starting from 1 to 9-DEV. For reason we will create some video where we will make fun of IE and explain why not to use IE and give users alternative, better browser links. Fck IE. I will not spend one minute on that shit.
But still, I don’t understand why developers care… Just can’t no matter that there is 50% of www users who’re using IE.
-
59.
[...] RGBA让设置背景透明度变得更加容易，我想会有更多的设计师利用这个功能来创建半透明效果。 [...]
-
60.
[...] RGBA让设置背景透明度变得更加容易，我想会有更多的设计师利用这个功能来创建半透明效果。 [...]
-
61.
Design Trends (Predictions) in 2010 « Syosys – Official Blog says:Comment » August 18th, 2010 at 10:41 pm
[...] RGBA makes setting background opacity easier. I think more designers are going to take advantage of this feature to create semi-transparent effect. [...]
-
62.
[...] RGBA让设置背景透明度变得更加容易，我想会有更多的设计师利用这个功能来创建半透明效果。 [...]
-
63.
http://siteexplorer.search.yahoo.com
- 64.
-
65.
Design Trends (Predictions) in 2010 : www.huedesigner.com says:Comment » October 18th, 2010 at 1:10 pm
[...] RGBA makes setting background opacity easier. I think more designers are going to take advantage of this feature to create semi-transparent effect. [...]
-
66.
IE is so much painful to work with. Unfortunately there are people still using it. Such a headache of making website all browser friendly.
-
67.
I can’t believe that ie8 still doesn’t incorporate any CSS3! Anyone know when ie9 is getting a full release?
-
68.
- 69.
-
70.
[...] RGBA makes setting background opacity easier. I think more designers are going to take advantage of this feature to create semi-transparent effect. [...]
-
71.
RGBA and RGB’s differences are Text opacity? that’s so good/
-
72.
[...] border color, and set the "a" to the transparency you want. Here's a quick intro to rgba: http://www.css3.info/introduction-opacity-rgba/ I don't see the repeating image issue. __________________ Ronald Roe Small Business Web [...]
- 73.
-
74.
[...] RGBA makes setting background opacity easier. I think more designers are going to take advantage of this feature to create semi-transparent effect. [...]
-
75.
I am trying to currently implement RGBA for IE 9 and it is still failing. It works great for drop down menus in all other browsers though. If anyone knows a solution would they mind sharing?
-
76.
I’ve just created a small website for school. The instructions were to use some properties of CSS3. Now that it’s almost finished, I’m really proud of it: it looks like quite good… and isn’t really complicated, I would even say it’s quite simple…
(Have a look by clicking my name, or there:
http://cocktails.x10.bz/ )Thanks for this support
-
77.
-
78.
Sadly, lack of support in IE means we still make small transparent background images where in reality it would be nice to use CSS3 for this :(
-
79.
[...] how you can use RGBA to describe colours. This way you can make use of the alpha channel to make shadows partially transparent (naturally, [...]
-
80.
[...] I asked, because that search lead me to this site css.info and an article about how to very simply make a div opaque without messing up the [...]
-
81.
Overlay: semi-transparent border, non-transparent inner area | SeekPHP.com says:Comment » October 23rd, 2011 at 11:58 am
[...] should give you solid red that is 50% transparent. Check out this intro to rgba if you want more [...]
-
82.
IE will always be in the stone age. Why can’t they upgrade their browser engine to meet the latest technologies atleast it should be well supported from IE7+.
- 83.
-
84.
Thanks for sharing, this is a fantastic article.Really looking forward to read more. Will read on…
-
85.
furqan zamir says:Comment » March 21st, 2012 at 1:02 pm
one problem i am facing i take div and bg-color is gray and i apply opacity for div inside all div take also opacity any one have solution to solve this problem but i don’t want to use picture
-
86.
hi ,is there any solution except using image to control opacity less tan 10 or (0.1)/(1)?
Please help me out if there is somthing.thanks & Regards
tanu -
87.
As in photoshop design opacity of inner shadow is 4 but what should i do in css3.
Plz reply soon………….. -
88.
can you please help me?
Below my question, so can you please give me answer.
1) Is it possible to specify more than one box shadow on a element?
2) In RGBa, what does the “a” mean?
3) In CSS3, which pseudo selector does not exist? … visible, disabled, empty, enabled -
89.
@Amit:
1) No, but you can fake it with transparent divs using z-indexes.
2) Alpha, as in alpha transparency.
3) They all exist. - 90.
-
91.
I’m new to front-end web site development – so thanks to all for their comments and tips :)
-
92.
2 Week Summary of Things Learned | web design chronicles says:Comment » January 29th, 2013 at 8:37 pm
[...] RGBA = red, green, blue, alpha (for opacity) [...]
-
93.
[...] confused? css3.info’s “A brief introduction to Opacity and RGBA” has a great example of the difference between the two declarations. When you apply opacity to a [...]
-
94.
Very nice tut. I always trust the info I get here as recently, I have to search for new techniques in CSS3. For all who use Internet Explorer, here’s an idea…Don’t use it! I know it might be harsh but who uses it anyway? There’s Firefox, Chrome, Opera…everything else is better…just like everything else is better than all MS software. Example: Windows Media Player. Who uses that?
-
95.
[...] Opacidade [...]
-
96.
[...] CSS Background Transparency that doesn’t affect children [...]
-
97.
[...] CSS Background Transparency that doesn’t affect children [...]
-
01.
TAG CLOUD
acid3
advanced layout
advanced layout module
Animations
background
border
Browsers
color
css
CSS3.info
CSS WG
csswg
developer tools
disabled
enabled
Feedback
firefox
firefox 3.1
flexible box layout
fonts
generated content
grid positioning
HSLA
HTML5
ie6
jina bolton
jquery
media player
Multicolumn Layout
News
Opera
Opera Dragonfly
presentations
RGBA
safari
Selectors
slides
SVG
text rendering
W3C
wasp
Web Fonts
webkit
windows
Hosting by:
Leave a Comment