These days, you really don’t have to worry about opacity being a difficult thing cross-browser. You just use the opacity property, like this:
.thing { opacity: 0.5; }0 is totally transparent (will not be visible at all, like visibility: hidden;) and 1 is totally opaque (default). Anything in between is partially transparent.
For historical reasons, this is how is we used to do it:
.transparent_class { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-opacity: 0.5; /* Safari 1.x */ -khtml-opacity: 0.5; /* Good browsers */ opacity: 0.5; }
Actually missed the IE8 opacity brouhaha. Thanks for including that!
Yep. I didn’t know about that one either. The only issue I have with this snippet is that it’s not valid CSS.
Nevertheless, I’m gonna use it.
add display:inline-block will fix that. xD
Che Guevara Killer!
@Amr SubZero
I created an account only to thank you, this fixes the issue of IE where an element was not passing opacity down to its children.
Usefull :) Thanks!
attention – sequence
.yourselector {
background:#000;
opacity: .75; /* standard: ff gt 1.5, opera, safari */
-ms-filter: “alpha(opacity=75)”; /* ie 8 */
filter: alpha(opacity=75); /* ie lt 7 */
-khtml-opacity: .75; /* safari 1.x */
-moz-opacity: .75; /* ff lt 1.5, netscape */
}
If you want opacity to also work in IE8’s emulating IE7 mode, the order should be:
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first
filter: alpha(opacity=50); // second
If you don’t use this order, IE8 emulating IE7 doesn’t apply the opacity, although IE8 and IE7 native do.
What about keeping the text inside the layer normal?
yeah! I’m wondering how to do this too..
If you set a parent container to an opacity less than 100%, all of its children will also be less than 100%, not because it cascades, but because the parent is dimmed. If the parent is dimmed to 75%, even if you give the child 100% opacity, it will only be 100% of 75%, which is 75%.
What I do is just use a semi-transparent PNG as a background image for the parent, and then the children can have full opacity.
inb4 IE6 doesn’t render 24bit pngs… Eff ie6, I’m done pandering to ie6, and enabling everyone who still uses it. The use of a semi transparent png is not going to break the site, but it will certainly affect the prettyness, which is all the more reason for people to upgrade.
Use rgba
You need to prevent the style from cascading… you need to wrap your text in an element with an opacity of 100.
I was wrong: https://css-tricks.com/non-transparent-elements-inside-transparent-elements/
I find that I use this snippet more than any other on the site. Thanks! =D
Is this ok for IE9?
ie9 support “opacity: 0.5;” like chrome and firefox
thanks for update coded^^
Awesome “Submit Comment From”. Congratulations, the best i have ever find surfing in the internet world for years…
But I have one question…
Why all of you “webmasters”, keep asking email , hum??? If i want an answer I just put my email or even better I contact you. If not I will just SIMPLY LIE! And use one like this one: [email protected]
Take off this “required fields”. I hate this mass standardization and globalization, it’s so kitsch and so predictable, is a false sentence to evoke a mystified concept from it.
Webmasters ask for emails to help identify spam, as well as uniquely identify users. If you don’t want to enter your email, then have faith that your posts will be removed as spam, and that you really can’t contribute, because you’re not anything more than a few “asdf”s
I LOLD when i read the “good browsers” thing
That my man is because you are an idiot
good information, very helpful. Thanks..
@asdasdasd: you should view this awesome submit form in IE8.
I tryed this on a PNG but then it get a black bar arround it.
Thanks this is a big help!
As Chris wrote here: https://css-tricks.com/64-css-transparency-settings-for-all-broswers/
Use the following anno 2011:
All my text is invisible because it is supposed to be completely transparent against a semi-opaque background… but I can’t get the opacity to work in IE 7/8. It’s nested inside a P that’s it.
I tried zoom:1 & Hilbrand’s fix for opacity and I still can’t get it to work. Am I doing something wrong or anyone know a code snippet to fix it?
Had to laugh at the reference to ‘Good Browsers’ – I’m glad things like this don’t need to be a long article as all the answers are in your snippet, which is great. :)
Thanks this has saved me hours!
Good Browsers you got that one right!
“it’s so kitsch and so predictable, is a false sentence to evoke a mystified concept from it” You should have been a writer! Haha.
The /* Good browsers */ comment made me laugh!
Thanks for the post, I use this snippet of code all the time when designing :)
Just have to say thanks for this. I continually refer to it!
This works great for me except for IE6 & IE7. It turns out that you need to capitalize the “A” and “O” like this:
filter: Alpha(Opacity=50);
Cheers!
my mistake! my last post was incorrect. using lower case works correctly in IE6 & IE7
filter: alpha(opacity=50);
Thanks again!
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
This not works in IE8
What i have to do work it in IE8 & 7
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
This not works in IE8
What i have to do work it in IE8 & 7
Hi,
I have used css pie for rounded corner but one problem is that for opacity i have used the above code but i can’t see the opacity.
if i remove csspie behavior then i see the opacity in IE8.
so is it problematic to include csspie? i dont find any solution pls help.
Thanks
Have you created all these snippets as wordpress’ dynamic pages unlike wordpress posts?
No.. actually i have used this snippets in my html page and css.
Hi
every time I need to design a css style, I come here. thanks a lot Chris
how bout -webkit-opacity? Is it for google chrome?
Any update on this?
The is an issue with using the opacity property and images:hover. This causes the images to “jump” a pixel for a strange reason. however the following fix works (I have no idea why):
box-shadow: #000 0em 0em 0em;
for more information: http://stackoverflow.com/questions/9581071/jquery-fading-images-with-html-resize-makes-them-move-sometimes
Good Job Mr.
Helps me a lot specially in IE issues
there is a better way found:
background-color: transparent;
background-color: rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000)”;
how to measure background size in IE8 when ms-filter not worked
sorry wrong post, that’s for transparent background only, but works without isolating ie7 8 files
Unfortunately I’m facing black border around button in IE7 while using opacity.
does any one have solution for this ?
Thanks, perfect :D
Thanks a million Chris. This helped me a lot :)
For IE7 you really to ensure it has a few of these as well…
position: relative;
z-index: 99;
zoom: 1;
overflow: visible;
Thanks. it was useful.
was really helpful
Hmm. This only seems to work when I drop the quotes around each filter.
Hi, IE9 compatibility mode the opacity not working. Is there any specific code for that…
Why would you use compatibility mode in IE9? Simple users don’t use that. Test on real IE8 if you want IE8 compatibility.
still laughing at the comment /* Good browsers */
. . . but that’s the truth :)
This code is not working on IE8. Anyone tell me the perfect solution. thanks
https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
“Firefox 3.5 and later do not support -moz-opacity”
The best place to find css tricks. IE8?! what were they thinking, MS, seriously?
Thanks for this! Gotta love still supporting IE8! ;)
need a solution for ie8 :|
Can we get this page updated or off the internet, please? This shit is ancient.
I’ll update it to be more clear and suggest the most modern simplest way.
Hi Chris, you put
filter: alpha(opacity=50);under IE 5-7, but it works just fine in IE8, no need for that complicated line of code with DirectX… for IE8.Am I missing something? It’s true I am testing this on IE11 emulating IE8.
Thanks
Stop supporting legacy browsers.
Make a huge notification window when someone is trying to connect to the website through one of them, notifying him that he’s using a dinosaur-old web browser and that he should update. Even Microsoft is trying to get rid of IE!
It’s so ridiculous for IE 8, not support opacity, even filter:alpha(opacity=56). And why must use -ms-filter:”progid:DXImageTransform…bla.bla.bla”?
Silviu is correct… filter: alpha(opacity=50); works fine on IE8
Hi,
Opacity is working fine in IE11 and Chrome but fails in IE11 – ENTERPRISE MODE. Kindly advice if any body had tried opacity for IE in enterprise mode and the issue is the background is completely grey in color which works fine in other browsers.
have used {opacity: .3; filter: Alpha(Opacity=30)}. Kindly share a solution.
what is the use for
/* Safari 1.x */
-khtml-opacity: 0.5;
?
Thanks
Hey there! That’s the the required prefix if you want to Safari version 1 to support opacity. Safari didn’t support that feature until later, so getting to work on that version will need that prefix on the property.
okey, thank you sir Geoff Graham