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(https://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…
this example don’t work in opera 8.5, opera 9+ only
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.”
I changed the way it was worded. Hopefully that will clear up any future confusion. thanks!
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).
Thanks for calling those details out.
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
It definitely works in IE6. If you’ve got a sample page out there maybe I can spot any problems with your implementation.
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.
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);
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.
Nevermind. I did what you suggested and it works great! Thanks for your post.
Good to hear! I was just going to check in to see what might be wrong.
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 .
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.
Rob is right about the IE filters only working on elements which hasLayout is true. Try zoom: 1 if position: relative causes more headaches.
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 . . .
thx for this nice and useful tips man
i’ve try and its work
Sorry GUYS,
It Doesnt work at all……
Sorry SCOFIELD,
It works perfectly so you probably just have no idea what you’re doing……