Cross Browser Opacity using CSS and Internet Explorer filters
by Rob Larsen
I’ve used this technique several times and I’m actually using it prominently in a UI component that I’m working on right now. I’ll have a lot more on that at a later date (plenty to write about with that piece:)) and I’ll actually have more on the potential pitfalls of this technique as well. This post is just the basics.
Anyway, this technique works in everything that browsercam offers other than the following unsupported browsers:
- Konqueror 3.4.0-5
- Explorer 5.2
- Mozilla 1.6
- Opera 8.5.0
- Netscape 4.78
- Internet Explorer 4.0
All things considered, that’s really pretty good coverage. So, if you’ve been dying to get some variable opacity into your life and you want to apply it to an arbitrary element, then this is your post.
Okay… enough with the intro. Here’s a sample:
And here’s the code for the sample page (all of it.) The important bits are in bold and the comments should explain all there is to know about the technique.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>opacity sample</title>
<style type="text/css">
.seventy-percent {
color:white;
background-color:#336699;
position:absolute;
width:225px;
height:225px;
/*here's the CSS3 standard method. this works in everything* but IE. */
/*It's in fractions of 1. So 1 is 100% opacity (AKA the default) and .5 is 50% opacity.*/
opacity:.7;
top:20px;
left:20px;
padding:10px;
}
body {
background:url(http://www.drunkenfist.com/web/samples/transparency/bg.jpg)
}
h1 {
margin-top:75px;
}
</style>
<!-- and now I use conditional comments to slide in the IE specific code.
Since every other browser thinks this is just a comment it keeps all the evil IE-ness
away from other browsers.
-->
<!--[if gte IE 5]>
<style type="text/css">
.seventy-percent {
/*It's a 100 scale. So 100 is 100% opacity (AKA the default) and 50 is 50% opacity.
The worst part of this is not the CSS issues, since this sort of forking is common.
It's coding opacity in Javascript. You always
have to make some second calculation to
make things match across browsers
*/
filter:alpha(opacity=70);
}
</style><![endif]-->
</head>
<body>
<div class="seventy-percent"> This is a div with seventy percent opacity </div>
<h1>This is some text in the background</h1>
</body>
</html>
*everything but the previously named browsers, that is…
Follow @robreact
messie Says:
September 14th, 2007 at 7:35 am
this example don’t work in opera 8.5, opera 9+ only
rob Says:
September 14th, 2007 at 7:38 am
thanks. I actually name Opera 8.5 explicitly as an unsupported browser in the article, so maybe I should look at how I worded it.
“Anyway, this technique works in everything that browsercam offers other than Konqueror 3.4.0-5, Explorer 5.2, Mozilla 1.6, Opera 8.5.0 , Netscape 4.78 and Internet Explorer 4.0. All things considered, that’s really pretty good coverage.”
rob Says:
September 14th, 2007 at 7:40 am
I changed the way it was worded. Hopefully that will clear up any future confusion. thanks!
Zarel Says:
October 26th, 2008 at 10:28 pm
You should probably change that to
opacity:0.7;-moz-opacity:0.7;
-khtml-opacity:0.7;
for support for older versions of Firefox, Mozilla, Safari, and Konqueror. And note that iCab doesn’t support any similar sort of opacity setting (iCab is notably the only modern rendering engine that supports Mac OS 9).
rob Says:
October 26th, 2008 at 10:36 pm
Thanks for calling those details out.
Aamir Afridi Says:
January 13th, 2009 at 6:48 am
This is exactly what i was looking for. Well i just tried that in IE6,,, it doest work may be i am doing something wrong or IE6 dont support opacity? :S
rob Says:
January 13th, 2009 at 7:37 am
It definitely works in IE6. If you’ve got a sample page out there maybe I can spot any problems with your implementation.
Kim Says:
February 2nd, 2009 at 10:52 am
I am trying to do exactly what you’ve done here. I’d like the logo in the background with the title div on top with a 60% opacity. I’ve tried what you have here and can’t seem to get it to work. It looks just the way I want in firefox, but doesn’t work in ie. Would you mind looking at it and seeing if you see any problems. Thank you so much.
rob Says:
February 2nd, 2009 at 10:57 am
You need to add a rule for IE
After
opacity: .6;
you need to add a rule that IE will understand:
filter:alpha(opacity=60);
Kim Says:
February 2nd, 2009 at 11:19 am
I did that and have been testing it in my browser, I uploaded the new css just after I posted, but you were so fast–sorry. It still doesn’t seem to work.
Kim Says:
February 2nd, 2009 at 1:38 pm
Nevermind. I did what you suggested and it works great! Thanks for your post.
rob Says:
February 2nd, 2009 at 1:43 pm
Good to hear! I was just going to check in to see what might be wrong.
Maketo Says:
February 26th, 2009 at 4:11 am
hie guys
i have tried all the way you have said but can not figure it out in IE. #jsddm li ul li a
{
opacity:1;
-moz-opacity:0.70;
-khtml-opacity:0.60;
filter:alpha(opacity=50);
z-index:10;
font: 11px Tahoma, Arial;
width: auto;
line-height:40px;
padding-left:20px;
padding-right:20px;
border-bottom:0px;
background: #405E7A;
}
That my piece of code. what might be the problem because when i view the drop down its okay in Linux, Moz, Safari but in IE wooo, am now tied for searching. will a good samaritan write to me on maketo@neo.co.mu. will be glad for the mistale am making .
rob Says:
February 26th, 2009 at 7:56 am
Hi,
I believe the IE Filters only work on elements on which the hasLayout property is true.. I don’t know what the rest of your sheet looks like, but generally an <A> does not. You can try adding something like position:relative to the rules. If you have an example I can look at on the net I can maybe help you out a little more.
Chase Willkom Says:
May 6th, 2009 at 11:28 am
Rob is right about the IE filters only working on elements which hasLayout is true. Try zoom: 1 if position: relative causes more headaches.
Don Jones Says:
June 16th, 2009 at 6:05 pm
And now IE 8 needs THIS nonsense!
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"This brings up the obvious question: Is Microsoft being obnoxious on purpose just to pay back users for hating Vista? What is their motivation for spitting in the face of CSS3? Sigh . . .
Rudi Says:
July 31st, 2009 at 4:17 am
thx for this nice and useful tips man
i’ve try and its work
Scofield Says:
November 24th, 2009 at 10:21 pm
Sorry GUYS,
It Doesnt work at all……
Max Says:
April 29th, 2010 at 7:51 pm
Sorry SCOFIELD,
It works perfectly so you probably just have no idea what you’re doing……