CSS Transparency Settings for All Browsers
Transparency is one of those weird things that is treated completely differently in all browsers. To cover all your bases, you need four separate CSS statements. Fortunately they don’t interfere with each other really, so using them all every time you wish to add transparency is no big hassle and worry-free. Here they are, and are currently set to 50% transparency:
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}UPDATE: I wanted to pull this post out of the archives and update it a bit because it there seems to be a good amount of interest in this subject.
Here is what each of those CSS properties is for:
- opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
- filter:alpha(opacity=50); This one you need for IE.
- -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
- -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.
Loading ...
1
I’ve tried to use this on links as the following :
a img:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Unfortunately, it does not work on IE. Do you know how to overcome this problem?
Comment by shane — October 1, 2007 @ 9:03 am
2
I think your problem you are applying the pseudo class :hover to the img element not the anchor element. IE doesn’t support pseudo classes on img elements I don’t think.
You could try setting up a class (e.g. “transeffect”) for the anchors you want to have this transparency rollover effect on and then changing your CSS to:
a.transeffect:hover {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Comment by Chris Coyier — October 1, 2007 @ 10:38 am
3
No it’s not that, IE does support the onhover stuff, fortunately.
There’s a bug in IE 6 + 7 (perhaps older versions too — haven’t checked) that prevents the filter / opacity to be applied on elements when there is no dimension property assigned in CSS.
One way to bypass that bug is to use JavaScript, then it suddenly works. Or just specify a height / width when it doesn’t conflict with the stylesheet.
Comment by anonymous — October 11, 2007 @ 3:12 am
4
Ah yes, that would work. You maybe be able to set the width to like 99.9% to trigger it as well, instead of setting an fixed width when you don’t want to.
Comment by Chris Coyier — October 11, 2007 @ 4:52 am
5
-moz-opacity:0.5;
-khtml-opacity: 0.5;
Hi Chris, these two lines are for which browsers?
Comment by Volkan Görgülü — October 24, 2007 @ 9:17 am
6
the -moz-opacity selector is for way old versions of the Mozilla browser (Netscape). This still works and is necessary for those browsers.
the -khtml-opacity selector is a little stranger. I originally picked it up when working with JonDesign’s SmoothGallery for the first time, where he uses it for a few rollover transparencies. I believe -khtml is specifically for Safari 1.x.
Comment by Chris Coyier — October 24, 2007 @ 9:39 am
7
I use:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”images/background.png”, sizingMethod=”scale”);
Comment by Jermayn Parker — November 4, 2007 @ 5:29 pm
8
I’d love to see some live examples of these styles in action. I was thinking it might be neat to have a floating div with the random letters of half a secret message, with the other half of the letters in a background image or something so you’d have to scroll down to exactly the right point in order to reveal the full message. I’m still fairly new to CSS myself, though, so I can’t think through how to make it happen.
Comment by Brian Cook — November 7, 2007 @ 8:18 am
9
Dont forget DOCTYPE to make it work with IE7
add this to your html to make it work with IE7
Comment by Gagan — November 20, 2007 @ 12:35 am
10
”
the -khtml-opacity selector is a little stranger. I originally picked it up when working with JonDesign’s SmoothGallery for the first time, where he uses it for a few rollover transparencies. I believe -khtml is specifically for Safari 1.x.
”
Well its not specifically for Safari, the linux webbrowser Konqueror is also based on the khtml kit.
Comment by V1 — November 22, 2007 @ 3:04 am
11
If use transparency on a block element it makes the text inside transparent as well - is there a way i can prevent that from happening?
I tried putting the text in another div and setting the opacity to 100 but that didn’t do the job, although, logically, i thought it would…
Comment by shane — December 7, 2007 @ 1:37 am
12
You can’t use nested div since it inherits parents opacity level as his 1.0-opacity. You should use the same level foreground div, absolutely positioned over transucent background div, with higher z-index.
Comment by fioge — December 12, 2007 @ 8:55 am
13
You can use a nested div to get non-transparent text over semi-transparent background if you turn the opacity on the inner div back up, and set the background-color to transparent:
test
See my goofing around/learning/hack page: http://www.aedsnet.com/ajaxmap.html
(click on a map-marker to see the semitransparent box).
At least, it worked in IE7 and FireFox
Comment by Robert — January 7, 2008 @ 1:37 pm
14
OK, that link should be http://www.aedsnet.com/maps/ajaxmap.html
Also, I didn’t realize the html I put into my comment would not display as text,
so this is what I have as properties for my “nested div”:
style=”opacity:1; background: transparent;”
The parent div has a green background with opacity of 0.8
But surely it can’t be that simple?
Comment by Robert — January 7, 2008 @ 9:16 pm
15
@Robert: It looks like the text inside your transparent boxes are picking up the transparency as well. You cannot “turn back up” the transparency of child elements, unfortunately.
I did a little tip on how to deal with the recently: Non-Transparent Elements Inside Transparent Elements.
Comment by Chris Coyier — January 8, 2008 @ 1:58 pm
16
Well… this is well-known indeed but this is NOT valid CSS! Maybe a transparent png as a background along with a js library to handle IE case would be better
Comment by Karim — January 19, 2008 @ 10:23 am
17
Thx for the info and tips Chris Coyier
Comment by derry3 — February 10, 2008 @ 5:28 am
18
in ie6 :hover works only with a link. this will work for you though:
a:hover img {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Comment by oleg — February 11, 2008 @ 5:41 am
19
I have a checkbox and i want that checkbox to have opacity 0.5. I am using Mozilla 1.4 browser in Solaris 9. But the checkbox is not getting displayed for ‘-moz-opacity:0.5;’. It does not consider values in the range 0 or 1. For values less than 1 checkbox is not getting displayed. Please tell me the solution , if in solaris 9 i can use another property.
current style class for checkbox:
{
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5; }
Comment by dipak — March 7, 2008 @ 3:32 am
20
In my CSS i have something like this:
{
position: absolute;
height: 99%;
width: 25%;
cursor: pointer;
z-index:10;
filter:alpha(opacity=20);
-moz-opacity:0.2;
-khtml-opacity: 0.2;
opacity: 0.2;
but SmoothGallery still looks awful in Konqueror and Opera. Any way to fix this?
Comment by NekySerbia — March 28, 2008 @ 4:33 am
21
FOR THE FIRST COMMENT , you should do like this , and it will work in all browsers =>
a:hover img {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
Comment by zombie — April 14, 2008 @ 8:39 am