Controlling opacity

[The Eclectic Electric]

Has anyone had any success exploiting the CSS opacity attribute?

I've created a menu bar and given it opacity, but I was hoping that I would
be able to set the transparency of the elements within. So far, no success.
My best guess was to set the background of the "child" divs to transparent
and set opacity to 1.0 but it didn't work. Without this I'm stuck to near
opaque values. It's not a biggy as IE doesn't support it anyway, but it
would be nice to set the background opacity to, say 0.4 and have the text at
1.0.

http://www.mrcakey.co.uk/test.htm

http://www.mrcakey.co.uk/css.css

+e

 

[J.O. Aho]

Has anyone had any success exploiting the CSS opacity attribute?

I've created a menu bar and given it opacity, but I was hoping that I would
be able to set the transparency of the elements within. So far, no success.
My best guess was to set the background of the "child" divs to transparent
and set opacity to 1.0 but it didn't work. Without this I'm stuck to near
opaque values. It's not a biggy as IE doesn't support it anyway, but it
would be nice to set the background opacity to, say 0.4 and have the text at
1.0.

Are you talking about the ugly face seen under the menu on the left side?
It seems to work fine in SeaMonkey and Opera, Konqueror don't apply
transparency on the menu. My suggestion is to ditch MSIE.

 

[Jonathan N. Little]

Are you talking about the ugly face seen under the menu on the left side?

Think so, Tony Blair with a UPC "Hitler" mustache. My God resample that
turkey! It really 867px x 1304px that you've constrained to 145px x
300px with attributes. In fact you've done it improperly and distorted
it for 300px high the image should be 199px not 145px! Looks bad and
doesn't really works design wise.

 

[The Eclectic Electric]

Are you talking about the ugly face seen under the menu on the left side?
It seems to work fine in SeaMonkey and Opera, Konqueror don't apply
transparency on the menu. My suggestion is to ditch MSIE.

It was an image that was to hand!

I've set the opacity to 0.4 now to demonstrate what I mean more clearly.
The text is made transparent too, as I suppose it should be looking at the
draft W3C spec.

I honestly don't think it can be done, but thanks for having a look anyway.

+e

 

[The Eclectic Electric]

Think so, Tony Blair with a UPC "Hitler" mustache. My God resample that
turkey! It really 867px x 1304px that you've constrained to 145px x 300px
with attributes. In fact you've done it improperly and distorted it for
300px high the image should be 199px not 145px! Looks bad and doesn't
really works design wise.

It was just an image that was to hand - it's nothing to do with the final
design, it's just there to have something other than the plain background to
"see" through the menu.

+e

 

[Toby Inkster]

I've set the opacity to 0.4 now to demonstrate what I mean more clearly.
The text is made transparent too, as I suppose it should be looking at the
draft W3C spec.

Yep -- that's what "opacity" does -- it controls the opacity of the entire
element -- foreground and background.

If you only want the background to be translucent, then try using an
alpha-blended PNG and setting opacity to 1.0.