CSS background transparency without affecting child elements, through RGBa and filters
Looking at the design of most web pages today, almost exclusively all of them include some semi-transparency of elements. However, getting the desired effect in CSS is harder than one might think.
The problem
If we want an element to have a semi-transparent background, and let whatever is behind it shine through, we have two options:
- Using CSS and opacity
- Creating a 24-bit PNG background image
The problem with using opacity in CSS, besides the annoying syntax to cater to all web browsers, is that not only the background of the element will have transparency, but all of its child elements as well. This means that any text within will have the same opacity, which I would dare to venture is very seldom the result one wants. You can cater to this problem with creating redundant elements, some tricky CSS positioning and such, but really, it’s a mess.
The problem with PNG images is, beside a superfluous HTTP request, that images are way, way more larger in file size than one or two lines of CSS code – especially considering that the image has to be a bit larger to avoid serious memory leak issues with 24-bit PNG images with alpha transparency in Internet Explorer.
The solution!
Therefore, I can happily offer an alternative for you: RGBa colors. The beauty in this is that you declare the normal RGB values + values for the level of transparency you want, resulting in a very easy way to declare transparency for a color. Making this happen with CSS, with a fallback for those web browsers that doesn’t support it, would look like this:
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
}
The transparency will only be applied to the background – fantastic, isn’t it?! 
A little caveat
Shockingly enough (erm), no version of Internet Explorer supports RGBa colors (i.e. not IE 6, IE 7 or IE 8 at the time of this writing). However, and lucky for us, in year 2000 Microsoft went crazy with implementing various filters in IE. One of them are the gradient filter, and what we can do is use that and just define the same start and end color. “Ok, but how do I get the transparency”, you might be thinking now. The answer to that is that you will declare that as part of the color hex value. A CSS gradient filter achieving the same effect as the CSS code above would look like this:
.alpha60 {
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
}
As you can see, it is actually declared as part of an 8-digit hex value, where the first two numbers is the alpha hex value, the next two is Red, and so on. The difference between how we do it with RGBa is that the hex value will range from 0 to 255, just as any color value. So, how do we convert an alpha level of 0.6 to its hex value?
This where a little Math comes in the picture. Basically, we take our desired alpha level, 0.6, and multiplies it with 255 – then we convert that result into hex. One very easy way to do this is make use of Google’s Search Features, and just search google for 0.6 * 255 in hex. Unfortunately, though, Google’s calculator seems to only handle integers, hence 0.3 * 255 in hex won’t give you a result.
An alternative, or quicker way altogether, is to use the beauty of JavaScript. Just open up Firebug and type this into the console:
// Replace 0.6 with your desired alpha level Math.floor(0.6 * 255).toString(16);
99 is then corresponding to 0.6, and becomes the first two digits of the start and end colors for the gradient filter.
Combining it all
With all techniques learned above, let’s put it together in a working CSS rule:
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
NOTE! In addition to this, you have to declare background: transparent for IE web browsers, preferably served via conditional comments or similar!
Web browser support
RGBa support is available in:
- Firefox 3+
- Safari 2+
- Opera 10
Filters in Internet Explorer are available since Internet Explorer 5.5.
This means that this will work for virtually everyone!
Acknowledgements
Thanks to RGBa Browser Support and Bulletproof, cross-browser RGBA backgrounds, today for the information and inspiration.
Thanks to Emil Stenström and Pelle Wessman for coming up with countless alternatives for hex conversion, and explaining basic math to stupid me.
125 Comments
January 11th, 2010 at 15:10
Ah, so that's where those hex codes went.
I figured you had something like this going on. Great idea and well done. I will surely use this quite soon.
January 11th, 2010 at 15:29
In my tests, the opaque background fallback doesn't work in IE6 and IE7. Probably not in IE8 either, but i didn't check.
By the way, did you test this solution for know issues with DirectX filters? Like necessity to have hasLayout=1, text that doesn't render like the rest of the page's text, and more?
January 11th, 2010 at 15:35
Great article Robert. Will surely come to use in some of my coming projects. I'm sick an tired of having to use Photoshop when switching background colors of my site.
And thanks for the link, I did nothing
January 11th, 2010 at 17:46
Great post!
Another crappy thing about IE is that if you set opacity or a gradient by setting this gradient-filter on a table-cellbackground for instance. The text you put inside this element will be rendered badly. You will see the difference if you use a gradient with the same color from start to end and put at text above it. If you do the same thing with just a plain background-color and no filter the text will render much more smoothly with antialias.
I guess PNG is the safest alternative. But most boring and tedious…
/gun-R
January 11th, 2010 at 18:11
Gustaf,
Yes, that explains my new-found hex fetish, right?
Florent,
Thanks for pointing that out! For IE, through conditional comments or similar, the background has to be set to transparent (I have updated the blog post).
In Lea's blog post, she lists a number of possible shortcomings. And yes, having layout is necessary, there are some text problems (varying on context) etc.
At the end of the day, though, I think it's about mindset: as with any CSS in IE, you could either see it as a possibility (with some kinks to work out), or as a potential problem.
Emil,
Exactly, I think this can become really useful!
Gunnar,
Thanks!
Absolutely, there are some drawbacks when it comes to rendering, with various results. I guess it's all about weighing pros and cons together; the text might not be identical, but it will perhaps be good enough.
January 11th, 2010 at 18:44
Great post Robert!
One thing to keep in mind for this approach, is that rendering in IE slows down to a crawl (if that's even possible) when you're using filters.
Depending on your context, you might be killing your client-side performance if you start using filters. On the other hand, if your page is relatively simple, then this technique might just be the ticket!
Knowing when to use which technique for IE seems to be key for success these days.
January 11th, 2010 at 19:30
Morgan,
Thanks!
And yes, filters might have that effect in IE, but not all the time – it's all about testing in the applicable context.
And yes, IE testing and experience is definitely key.
January 13th, 2010 at 0:37
[...] CSS background transparency without affecting child elements, through RGBa and filters [...]
February 16th, 2010 at 1:00
Works perfick! Had previously thought that IE visitors would be stuck with a less pretty version. Thanks, (now to get those rounded corners working….)
February 16th, 2010 at 13:26
Paul,
Yes, the rounded corners are a little bit more tricky…
February 25th, 2010 at 13:40
I use this variaton, which fits into one declaration block:
<code>
.transparentoid {
background: #FF8040; /* solid color */
background: rgba(255,128,64,0.125); /* transparent color */
background: transparent !ie; /* clear solid background for ie */
zoom:1; /* required for the filters */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FF8040, endColorstr=#20FF8040); /* IE5.5-7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FF8040, endColorstr=#20FF8040)"; /* IE8 */
}
</code>
February 25th, 2010 at 15:48
biziclop,
Absolutely. Personally, though, I try to stay away from CSS hacks in my main CSS code.
February 26th, 2010 at 16:54
Actually, my example shows solid background in IE8, because i didn't test it
, so don't use it.
This is the fixed example, which shouldn't be used too, because ie9 may break it:
.transparentoid {
background: #FF8040; /* solid color */
background: rgba(255,128,64,0.125); /* transparent color */
background: transparent9; /* clear solid background for ie */
zoom:1; /* required for the filters */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FF8040, endColorstr=#20FF8040)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FF8040, endColorstr=#20FF8040); /* IE5.5-7 */
}
This example is more futureproof (apply the .MSIE class to the body tag somehow, or put it into a conditional css)
.transparentoid {
background: #FF8040; /* solid color */
background: rgba(255,128,64,0.125); /* transparent color */
}
.MSIE .transparentoid {
background: transparent;
zoom:1; /* required for the filters */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FF8040, endColorstr=#20FF8040)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#20FF8040, endColorstr=#20FF8040); /* IE5.5-7 */
}
And one more thing, filters disable the font smoothing in explorer where they are applied, so you must choose your fonts carefully.
February 26th, 2010 at 17:49
Absolutely, the font issue in Internet Explorer is one of it's biggest problems, so be wary.
April 21st, 2010 at 11:47
[...] CSS Background Transparency Without Affecting Child Elements, Through RGBa And Filters [...]
May 9th, 2010 at 19:05
[...] browsers. These techniques will get you started, but it is not as simple as it seems. According to Robert Nyman, you may encounter a problem with a child element’s [...]
May 12th, 2010 at 14:49
[...] Robert Nyman beschreibt eine Methode, die schnell in Firebug funktioniert. In der dortigen Konsole gibt man eine kleine Zeile Javascript ein. Zur Umrechnung eines 30%igen Transparenzwertes (opacity: 0.3) lautet die Zeile: Math.floor(0.3 * 255).toString(16); [...]
May 30th, 2010 at 22:57
Very cool trick, helped me lots
June 23rd, 2010 at 15:44
Exactly what I needed, thanks Robert!
June 26th, 2010 at 21:50
Me, Shane,
Great!
July 3rd, 2010 at 12:09
Amazing one
thank u
July 21st, 2010 at 14:38
Or instead of using a gradient filter, you can use the Alpha filter directly. Has this syntax: progid:DXImageTransform.Microsoft.Alpha(sProperties).
More info in the documentation http://msdn.microsoft.com/en-us/library/ms532967(…
July 27th, 2010 at 22:33
It works like a charm! Thank you so much!!!!
August 16th, 2010 at 0:27
fadi,
Thanks!
Evgeny,
That filter affects the transparency of the content as well, which is not what we want.
cheminguyen,
Thank you!
August 16th, 2010 at 6:24
Wonderful
that's what i was searching for to complete a project today. Thanks Robert
August 16th, 2010 at 14:03
Just what i needed! Thanks!
September 20th, 2010 at 3:20
That’s awesome.. thanks for that fix.. made life so much more easier.
September 20th, 2010 at 5:20
That's awesome.. thanks for that fix.. made life so much more easier.
October 8th, 2010 at 3:31
Robert, Thanks for providing this, it's saved me a lot of time! I appreciate it.
October 11th, 2010 at 14:06
You're welcome!
October 20th, 2010 at 8:45
Hey Robert,
Is there any css trick for rounded corners in IE other than using (htc) and js? using filters or some other way?
October 20th, 2010 at 15:20
sam,
Unfortunately not any way that I know of at least.
October 21st, 2010 at 17:29
GENIUS!
Thank you SO SO SO SO much for this, I have been looking everywhere when all along the code was so simple.
October 21st, 2010 at 18:49
Benjamin,
Glad it was helpful for you!
November 4th, 2010 at 19:16
You can easily get any hex value you want using Windows calculator:
change view to scientific, tap in your sums (in decimal), then click hex radio button.
November 14th, 2010 at 22:56
Hi there,
THANK YOU for this solution to creating transparencies.
I am using it to create transparency color in the background of my Content area on my WordPress site and I LOVE the way it looks.
However, I work on Mac only. I don’t have a PC and so could not see that the transparency wasn’t working for IE. A friend sent me an email and said the color was too dark behind the context text.
I am a novice at CSS and code, and so I am still a bit confused about how to get the transparency code for my hex color that will be compatible with IE.
So, if my rgba color code is as shown below (yes, it’s purposely set at .9, I just want a very little bit of transparency), how do I calculate what it would be for IE, and what is the resulting bit of code I’ll need to add to my CSS?:
.post {
margin:5em 1em 1em 1em;
background: rgba(149, 147, 242, 0.9);
padding: 5px .8em .8em 4em;
color: #000
}
If you have the time to respond to this I greatly appreciate it!!!
November 15th, 2010 at 7:49
I Dont have words to Thank you. Thank you so much let your great work continue
November 15th, 2010 at 7:50
I Dont have words to Thank you. Thank you so much let your great work continues
November 15th, 2010 at 12:55
John,
Yep, that’s an option.
elaine,
This should work for you:
.post {
margin:5em 1em 1em 1em;
background: rgba(149, 147, 242, 0.9);
padding: 5px .8em .8em 4em;
color: #000
/* For IE – resetting background color hack */
background: transparent\9;
* For IE 5.5 – 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#E59593f2, endColorstr=#E59593f2);
/* For IE 8*/
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#E59593f2, endColorstr=#E59593f2)”;
}
J Ramakrishnan,
You are welcome!
December 8th, 2010 at 10:28
Do I have to add “background: somethingsomething”, then make it transparent again? As IE doesn’t understand rgba anyway and the other browser don’t understand the IE-filters.
December 8th, 2010 at 10:32
Rappa,
Yes, for Internet Explorer, either in a separate stylesheet or through a CSS hack (e.g. background: transparent\9;), you need to set the background to transparent.
December 14th, 2010 at 14:24
Thank you, this was a great help in what I wanted to do!
It saved me a Lot of energy and time. : )
January 4th, 2011 at 10:18
Quick tips to calculte : use WolframAlpha, a mathematic search engine :
http://www.wolframalpha.com/input/?i=0.3+*+255+in+hex
Best regards,
January 5th, 2011 at 18:39
Ahh you’re a lifesaver! Very sweet trick to avoid using .png’s to accomplish transparencies.
January 26th, 2011 at 10:22
Genius! Thankyou so much!
This is one of those things that I previously wrote off as “impossible”, and will now find an excuse to use pretty much everywhere.
January 26th, 2011 at 10:35
pro.quo,
You are welcome!
Matthieu,
Good tip! Thanks!
Jim,
Yes, avoid overusage of images.
Michelle,
There you go! However, be somewhat cautious with filters in IE since it can affect performance.
January 26th, 2011 at 21:03
One other inherent problem with this is that there’s no support for, or obvious way to get support for CSS System Colours.
It’s perfectly easy to say:
div.tooltip {
background-color: InfoBackground;
color: InfoText;
}…and make a tooltip that matches the colours of a user’s interface.
It’s a whole different problem to make a tooltip that matches the colours, has fully opaque text, and an 88% opacity background still in the InfoBackground colour.
January 27th, 2011 at 9:49
Dodger,
Absolutely, good point. I’d wager, though, that that scenario is not very common, and an option could be to find out the RGB for the system colors.
January 30th, 2011 at 21:35
Thanks for this! you have solved a big problem for me! It is very much appreciated!
January 30th, 2011 at 21:38
Jamie,
You’re welcome!
February 1st, 2011 at 8:23
Thanks a lot for this article, very useful esp the firebug ‘calculator’ to convert alpha to hex and for cross browsers.
thanks,
James Tan
February 1st, 2011 at 9:06
James,
Thanks, glad you liked it!
February 7th, 2011 at 10:08
[...] CSS background transparency without affecting child elements, through RGBa and filters – Rober… [...]
February 12th, 2011 at 19:45
Hi, Im trying to make it work on my page (I have a medium knowledge of css) but it doesnt work
I would apreciate if you have an example. I think my mistake is how I made the page (I use tables normally…) I want my page to have a white frame and the white background with opacity, I would love the text to show up without the opacity…
The background image is in the “.body”
I have one table with the stye “.border” (with white border),
INSIDE another table with your style “.alpha60″
INSIDE ANOTHER TABLE with the text
I dont know if I should use DIVS!!! please help meeeee
February 13th, 2011 at 21:49
cynthia,
Please look in the CSS3 RGBa demo test page..
February 15th, 2011 at 17:29
Thanks for this blogpost. It was very helpfull (i always have problems with crossbrowser styling).
The background transparency works now in all the big browsers.
I use the css hack { background: transparent\9; } for IE browsers and it works great the first time i load my page.
I have a new problem now tho. I use JQuery to to hide/fadeIn certain div’s. But while the background-color with transparency looks good the first time the page is loaded, there is no background-color when the div is fading in due JQuery. This only happens in IE btw, all the other browser works just fine.
I guess it’s the css-hack (background: transparent\9) that causes this.
Just wanted to share this problem. Maybe someone has had the same issue.
- cheers -
February 15th, 2011 at 17:39
Ramiro,
That could be it. I’m not sure exactly how the jQuery approach is, but maybe you can get some nice pointer on their mailing list?
February 15th, 2011 at 17:58
I looked on the JQuery forum and it seems that IE has problems with animating transparent stuff…
When i use show() instead of fadein() it works fine.
IE…sigh…
Thanks for your quick reaction btw (bookmarked!)
February 15th, 2011 at 18:11
Ramiro,
Well, you could potentially have a parent element with no styling and fade that one in and out, and maybe get around the IE limitation.
February 18th, 2011 at 2:18
CSS newb here:
I couldnt’ get the transparency to work in IE the way Robert describes at the top because I don’t know the proper way to conditionally declare background:transparent.
biziclops trasparent\9 hack worked great however.
you can see my results @ My Website
Now if I could only get my sticky footer to work in IE. Everything works great in Firefox!
February 18th, 2011 at 10:03
MilkyTech,
Glad you got the background color to work!
March 10th, 2011 at 6:41
Thanks for the post; things are *almost* working beautifully. Here’s my problem…can you guess? IE. I want to use border-radius and background opacity both. The problem is that in IE (9) I get a square translucent background with a nice border-radius effect, so the corners aren’t getting cut off. Obviously I’d like no background outside the rounded corners.
Any thoughts?
Thanks!
March 10th, 2011 at 15:16
April,
Interesting. No, sorry, I didn’t know about that, but please report it to the IE team.
March 11th, 2011 at 21:29
thanks for the help! This works great!
March 15th, 2011 at 9:35
For box-shadow you will want to use
background: inherit;this will put the page background instead of the box-shadow color
still working on how to get rounded corners to work though.
March 15th, 2011 at 11:05
A T,
You’re welcome!
Kender,
Thanks, good input!
April 1st, 2011 at 4:21
Thanks MUCH for this. I’m pretty new to the coding, but between the post and the comments I was able to get this to work just the way I wanted. Lifesaver! (time saver at least!)
April 1st, 2011 at 10:38
Off the Wall,
Thanks, glad it was of use for you!
April 16th, 2011 at 8:51
Thanks very much for this; and just to comment that the code for IE 5.5 – 7 also seems to work for IE 8.
April 30th, 2011 at 1:25
Hi! If this is the function to convert:
Math.floor(0.6 * 255).toString(16);
Whats the function to desconvert?
Thanks!
April 30th, 2011 at 1:46
Fernando,
Maybe this helps: http://stackoverflow.com/questions/1981760/parse-hex-ascii-into-numbers
May 17th, 2011 at 14:31
Isn’t the max for opacity 128 or rather 0x7F ? The resulting effect was much to dark for me and i remembered that the values for opacity only range from 0 to 0x7F . So i tried 0x4C instead of 0×99 and the result was much better.
Thanks for this great information
May 17th, 2011 at 14:34
Michael,
Hmm, it might be so. Glad you found a solution that works!
May 17th, 2011 at 14:45
please disregard my comment. in my case the IE has somehow drawn the black background and the opacity. So, the resault was to dark in IE
May 17th, 2011 at 14:49
Michael,
Ah, right: yes, you need to remove the background color for IE, with conditional comments or CSS hacks, e.g.:
background: transparent\9;
May 19th, 2011 at 23:09
[...] CSS Background Transparency Without Affecting Child Elements, Through RGBa And Filters [...]
May 26th, 2011 at 17:38
[...] article here explaining how to work out the start and end values: CSS background transparency without affecting child elements, through RGBa and filters – Robert's ta… [...]
June 26th, 2011 at 8:46
Here’s and interesting subplot…
I’m using this trick for navigation- the transparent background is behind a dropdown part of the menu. I have some padding between the top level and the dropped-down part for clarity. In FF everything works just fine when you slide the cursor from the hovered over the padded area and to the rest of the list (because the elements are touching), but in IE, when mousing over the translucent area between elements, the cursor disengages with the hovered as if there is no element there, and the rest of the menu disappears before you can get to it. IE is just way too much fun!
Any thoughts?
June 26th, 2011 at 23:45
Tim,
Interesting. Depends on the element you have padding on, if it’s the containing element or the first one in the sub menu part. I’d play around with different approaches to see how it behaves.
August 11th, 2011 at 18:51
Great Post! Helps me a lot ….
Damn opacity on childs
Thanks & Cheers,
Matthias from Webdesign München and Reifen online
August 15th, 2011 at 12:31
Matthias,
Glad it was helpful to you!
August 15th, 2011 at 22:04
This is great! Thanks!
August 24th, 2011 at 2:55
Works great !
Thanks a lot!
sorry for my bad english
August 24th, 2011 at 9:11
Michael, Jverdey,
Thanks, glad you like it!
August 24th, 2011 at 14:56
There’s a bit of a problem with IE’s transparency filters. I tried using them in table cells, so the cells would have a background color but still see the gradient in background of table. While I put the ms filters (either one does this), All the contents ni the cells disappeared (text, images, etc).
August 24th, 2011 at 15:02
Miikka,
It could be related to the hasLayout bug, so maybe that’s worth looking into.
August 25th, 2011 at 15:58
@Ramiro
I have a problem using .animate with the IE filter. It seems to pick up the background color from the element.
I have an ul list sitting in a div with a semi transparent background (as above). ul and li elements are all css background transparent.
When the jQuery function is fired, the background of my list element briefly flickers to the background color, then does the animated fade to the new color correctly.
The trouble is that it also does this when I fade the color back to transparent… I get a quick flash of background color in the background of my li element, then the fade from the new color to transparent BUT instead of transparent I now have the background color as my base color, leaving the background of my li element as color and not transparent…?
Any thoughts people?
Cheers,
Matt
August 25th, 2011 at 16:03
Matt,
The only option I believe is to animate the parent or child element in relation to the one with the transparency, and see if that works.
August 25th, 2011 at 18:11
Hi there,
Thanks for the reply Robert.
My hierarchy is this:
<nav id=”NavContainer” class=”alpha50Grey”>
<ul id=”navigation”>
<li class=”navbgfade”>
<a href=”" id=”nav-home”>HOME</a>
</li>
<li class=”navbgfade”>
<a href=”" id=”nav-portfolio”>PORTFOLIO</a>
</li>
…
</ul>
</nav>
It is the <nav> (HTML5) container that has the alpha transparency. I am then animating each <li> item (navbgfade).
Works perfectly in Firefox, Safari et. al. But no joy in IE
My jScript for animating is as follows:
$(‘#navigation li.navbgfade’).hover(
function() {
$(this).stop(true, true).animate({backgroundColor:’#7d7d7d’}, 150);
}, function () {
$(this).stop(true, true).animate({backgroundColor:’transparent’}, 500);
});
If anyone has any ideas, I don’t mind tackling it in a different way but surely this should work?
Regards, Matt.
August 25th, 2011 at 18:19
Matt,
Not necessarily, though. Animation with jQuery and transparency in IE is very hard to make work.
August 25th, 2011 at 20:41
For now (until the jQueryUI or John Resig’s “jQuery Color Animation” script can handle this IE issue) I think I will either set the background to a solid color in IE browsers OR script the jQuery function so that IE browsers don’t fade the background color on hover and just switch from filled to transparent (which I have got working quite easily using jQuery to switch css properties). Not ideal but I guess it’s graceful degradation.
I’ll post back if I improve on this compromise
August 26th, 2011 at 8:08
Matt,
Good luck, and please post back if you find a good solution!
October 12th, 2011 at 7:59
[...] CSS background transparency without affecting child elements, through RGBa and filters MSDN: Gradient Filter IE9 Only Hack ??+??: Del.icio.us / ???? / QQ?? / Google?? / ?? » CSS4 ???WebRebuild ??: ???CSS????????WebReBuild 2011?????Alice ??????? CSS ?????? ?? » CSS ?? » [...]
October 15th, 2011 at 4:16
Brilliant, thank you
October 17th, 2011 at 16:28
Tom,
Thanks, glad you like it!
October 21st, 2011 at 10:39
[...] CSS background transparency without affecting child elements, through RGBa and filters Tweet a comment (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); Follow me on Twitter RSS Posted in CSS,Developing,Technology,Web browsers | 219 Comments | [...]
October 27th, 2011 at 16:13
thank you all for sharing …
all this tricks for IE compliancy is hell !
@ Matt :
am tryin’ to set opacity for a website but nothing worked !
maybe js will resolve my issue ! thanks
Sebastien
November 3rd, 2011 at 11:57
You should sing in a Rock band!
…because you ROCK!!!!
You solved my problem!
Thank God for people like you!
All the best,
Puiu
November 8th, 2011 at 15:25
we can use,
opacity: 0.5;
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
filter: alpha(opacity=50);
for all browsers.
November 9th, 2011 at 8:38
Thiyagarajan,
No, you can’t. Just as explained in the article, that affects the transparency of all the content in the element, not just the background. Besides, your syntax only works in Internet Explorer and no other web browser.
November 21st, 2011 at 16:04
hey mate i need to thank you! was going crazy to find the solution for this exact problem! by the way nice blog see you dimitri
November 24th, 2011 at 8:36
Im a newbiee…..in HTML
just a question
is there a way to use opacity in background image…?? or do i have to use a .png image with less opacity??
.anyclass{
background:url(image/notepattern.jpg) repeat;
}
Opacity just have to effect the image..
is there any solution?
November 24th, 2011 at 11:56
Eliyas,
You could use the opacity property (and workarounds for older versions of IE), or have a 24-bit PNG image with alpha transparency.
November 29th, 2011 at 9:12
Thank u for this post. Just what we needed!
December 5th, 2011 at 5:31
hey!
i need the background color of a “text box” to be semi transparent.
it looks like this:
#container{
margin:0 auto 15px auto;
width:700px;
padding:10px;
background-color:#ffffff;
color:#303030;
border:20px solid #000000;
}
so i want FFFFFF to be semi transparent, so you can see my background image on the site.
i made it work, but.. the text got transparent too, and i only want
the background color to be alpha.
any help?
i’m a n00b too
.
December 5th, 2011 at 10:26
Ray,
You need to set the background with RGBa, as explained in this blog post:
background: rgba(255, 255, 255, 0.6);
December 5th, 2011 at 11:59
thanks, man!!
December 26th, 2011 at 13:28
i is not working properly in my site. if we are not using the background: transparent prop, i works for moz as well as chrome. but not for IE. otherwise it works only for IE. why it is so???
December 31st, 2011 at 1:17
Ray,
You are welcome!
george,
Please see the solution in this comment.
January 9th, 2012 at 14:03
Thank you for this! I realize this post is nearly two years old, but this was just what I needed! Thanks again!
January 10th, 2012 at 5:07
Jeremy,
Good to hear!
January 23rd, 2012 at 8:32
[...] How to adjust the opacity of the background of a div without affecting child elements: [...]
January 24th, 2012 at 17:51
Hello,
Everything works great but I can’t understand how how calculate the filter value out of rgba.
I am using:
background: rgba(239, 234, 192, 0.9);
Thank you,
January 24th, 2012 at 20:41
Beata,
When it comes to the transparency part, please do as described in the post: use Google or paste the above code snippet into Firebug or any other web developer tool out there.
With the other three parts, you can use a RGB-to-Hex converter.
Good luck!
February 4th, 2012 at 19:06
[...] explains how this is the best solution to achieve this effect for all browsers. You can read it here. EmailtoImageAbout Moogle Stiltzkin View all posts by Moogle Stiltzkin → [...]
February 4th, 2012 at 21:35
Well, the solution exposed here seems to me a bit complex.
You can nest and set z-index to put opacity effect only in background.
Hope it will help…
February 6th, 2012 at 9:21
Flaminio,
That is an option too. However, using RGBa and just adding an extra value for opacity is quite easy. Only hassle is older versions of Internet Explorer.
February 7th, 2012 at 20:04
Exactly what I was looking for.
Only one correction. If I correctly understand image formats bit depth, PNG with alpha channel are 32 bit, not 24 (8 bit for red, 8 for green, 8 for blue and 8 for alpha). 24 bit PNG are RGB only. The same is valid for BMP.
February 8th, 2012 at 9:51
JT,
You are right. The extra 8 bits are reserved for alpha. I think I used the 24-bit reference, since that’s what you will find everywhere, in Photoshop menus and similar.
February 12th, 2012 at 11:30
Hi,
Can someone help me add the transparency solution in this guide to my site ? I’m not a programmer so i couldn’t figure it out :/
February 12th, 2012 at 19:41
Moogle,
Please try by copying the code as it is in the blog post. Alternatively, the CSS3 RGBa demo might help to check out.
February 28th, 2012 at 16:50
Hi Robert
Great post and really helpful. Having problems though. Got all of this working in Chrome, Firefox etc. Now got it working in ie6 using a different stylesheet. But not working at all in IE8.
I’m using a web page with a content layer and sidebar layer both with transparent backgrounds.
Using comments in the head tag to cover IE.
IE 6 CSS
#content {
padding:20px;
clear:both;
width:920px;
/* For IE – resetting background color hack */
background: transparent;
/* For IE 5.5 – 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f497B90, endColorstr=#7f497B90);
}
#sidebar{
position:absolute;
top:123px;
width:210px;
right:20px;
padding:20px;
font-size:8pt;
/* For IE – resetting background color hack */
background: transparent;
zoom:1; /* required for the filters */
/* For IE 5.5 – 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#990b3542, endColorstr=#990b3542);
}
}
If I create the CSS code for IE8 and refer to a specific style sheet using a comment, and if the background is set to transparent then I get no color and if I set it to say, background/5 or 5 it’s solid color.
Any ideas where I am going wrong?
regards
John WInterton
February 28th, 2012 at 22:28
John,
From what I can see from your posted code, you don’t have the -ms-filter property needed for IE8 (as outlined in the post).
March 15th, 2012 at 11:59
[...] Die Lösung habe ich im Blog von Robert Nyman gefunden: Original Artikel auf Englisch [...]
April 15th, 2012 at 15:24
Short code makes my web looks great.. thanks a lot
Write a comment