CSS Transparency Settings for All Browsers

Transparency is one of those CSS properties that has a weird history and requires lots of different properties and values to ensure cross browser compatibility that goes back as far as you can. To cover all your bases, you need a bunch of CSS statements. Fortunately they don't interfere with each other, 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:

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.

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.

”
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.

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…

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.

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).

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

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.

An element must have page layout in IE6 is you want to use opacity! You do this by using the star html hack and giving the element a height value of 1px. Because IE6 is stupid, the height will stretch regardless and all other browsers will ignore it.

If the element doesn’t have page layout, your opacity styles will have no effect at all.

Okay Chris … several situational comments appear to have been made … you have any further summary / conclusion (to tie-up all of these loose ends)? Or should we just consider your code at the top a good general starting point that’ll have to be situationally tweaked?

If you plan on using RGBA PNG images (RGB with transparency layer, not indexed) in an IE6-compatible application, it is needed to use DirectX (DX6 or above required) image filters, but I don’t recommend it at all exept for this special case.

Note the span containing the filter. The inner image is a transparent filler 1px x 1px (smallest size). I noticed it was better than a (non-breakable space) because of zoom text (can break design) and the unability to set a 1px sized text.

I found a JavaScript code that can replace all your PNGs in the page, I just changed it a bit to handle IE8. Works fine and quite fast, althrough there are some limitations:
– Images inside display: none elements will not be affected (IE bug ?). It may be the same with visibility: hidden and opacity=0, test yourself.
– Image are changed after all the page has loaded. The script will start even if loading has been interrupted by the user (ESC key, …) or some images are missing or unreachables.
– Once modified, images are no more IMG tags but SPAN: it becomes impossible to set image properties directy via scripting (JavaScript, Visual Basic, …) if image-specific codes are used:

This will not work for ex. in a subnavigation when the png is behind an a tag. the a tag will not work as long you ll not position it relatively what is not always possible. but yeah… theoretically it would work.

I’d like to highlight one important fact about IE. When testing I found out that:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; sets opacity ALSO for the children of a given DOM Element. i.e, given: will make div 1 alpha transparent and also 2 will be alpha transparent.

BUT if you want to mimic rgba alpha, for a 0.5 transparent background (that is, children will have their OWN opacity), you’d better use:filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66ffffff,endColorstr=#66ffffff);