Layout: CSS and Transparency

started by Mrblack on Feb 13, 2004 — RSS Feed

Mrblack Mrblack
Posts: 40

I have an imagemap that, when the user click's on an area, a box pops up over the map which includes some links, like a little menu.

I'm able to get this working with a couple of div's but I'd like the pop-up menu's box to appear transulcent (so you can see the imagemap through the menu).

Is there something CSS that I can use to do this easily or do I need to do something tricky like use a modified version of the background graphic in my menu?

Joe Gillespie Joe Gillespie
Posts: 528

There is very poor support for transparency in browser. Mozilla has one system, Explorer another, other browsers don't.

One way to fake it is to use a GIF with a transparent checker pattern as the menu box's background. It works (visually) in some instance better than others depending on what is behind it.

You could also experiment with using a PNG(24), but browser support for transparency in PNGs is sketchy too.

Baxter Baxter
Posts: 157

Both major browsers have proprietary versions of this. The good news is that each completely ignores the other.
In IE, the css command is:
filter:alpha(opacity=80);

With 80 being the percentage of opacity.

In gecko-based browsers, the same command is
-moz-opacity:0.8;

It actually works pretty well, unless you have a lot of text in the transparent area, or a fair bit of dynamic text, in which case it can slow the page to a crawl. Also, be aware that anything in the div will also affected, so any images, text, whatever, will also inherit the transparency/opacity value.

Mrblack Mrblack
Posts: 40

That is exactly what I was looking for, something that is cool on browsers that supprot it but doesn't break anything on ones that don't, and requires very little effort!

Thanks guys!

Baxter Baxter
Posts: 157

I forgot to mention... to get around the stuff in the box being translucent, here's what you do... say the box id is "box" in the style sheet, set the translucency on #box, then set a second rule for #box * {and reset the transparency to 100%}
The wildcard will select everything within the box and put it back to 100%translucency, when you give it the rule to do so.

Jdenny Jdenny
Posts: 65

I like this and it seems to work,

years ago I was using it on IE, but never really found a good use, although now I have more layout control it can be used for cool effects!

Is there no CSS background-opacity property?
Probably not but there should be!

Mrblack Mrblack
Posts: 40

I wanted to note that while I was able to get this working in IE I couldn't get it working in Mozilla (even with the gecko code posted); not that it was a big deal because when I looked at my page in Mozilla it was murdered anyway...

...I guess I have some work to do before I worry about the fancy stuff...

Thanks again for the info!

Baxter Baxter
Posts: 157

Post a link to your stylesheet / page.

Also, validate your css. If it's not working in Moz, generally speaking there's something wrong with it.

Mrblack Mrblack
Posts: 40

I'm sure it's my fault, I was doing all my "previewing" in IE and I'm sure I used some tags that only it understands.

I'd post a link but the site is for a rigged demo and isn't avaliable on the public internet.  The demo is in IE so it will do for now...

Bobert Bobert
Posts: 5

I'm not sure if this is true or not, but I remember reading somewhere that -moz-opacity: blah; only works on text.  ???

Btw, I like this forum. It is filled with intellegent and opinionated people.

Jdenny Jdenny
Posts: 65

yeah good forum - let's hope it doesn't get too popular!

only works on text? - well posibly but....

... most of the [tt]-moz-[/tt] css stuff is things that are planned for future CSS versions, and [tt]opacity[/tt] is propably going to be in CSS-3, so I would expect it to work as per the spec - the opacity for the whole of the block

Sabri Dino Sabri Dino
Posts: 45

yerinde köpek egitimi
arkadaşlık siteleri
Web tasarımı
istanbul eskort
bayaneskort

Maskodok Eko Maskodok Eko
Posts: 171

... most of the [tt]-moz-[/tt] css stuff is things that are planned for future CSS versions, and [tt]opacity[/tt] is propably going to be in CSS-3, so I would expect it to work as per the spec - the opacity for the whole of the block
Jasa SEO Profesional

TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

You must login to reply