Div transparency

[atholon]

Hi,

 

I am trying to make a div have a semi transparent background using the filter and moz property on that div. The problem is is that it is making all the text and images placed inside of that div also transparent.

 

Is there a way to fix that and just make the background itsself transparent?

[jackpf]

I don't think so. I think the general idea of opacity is that everything is that opacity. You could do something like...have a div with a background and an opacity, then a div with the text in on top of the other div, with an absolute position and z-index: 1. Something like that anyway.

[atholon]

Well I figured I could do that with a PNG image as the background.

 

it wouldn't matter that much but there's a water mark type thing that is on the very bottom

 

[Axeia]

How about,

#semiTransparent *
{
   -moz-opacity: 1;
}

Granted all text is wrapped in a container like <p>.

[bronzemonkey]

Using {opacity:1;} (because opacity is now fully supported by mozilla) won't work because it will only be 100% opacity that is inherited from the parent.

 

If by semi transparent background you mean only semi transparent background colour, then you can use:

 

{background:#000; background:rgba(0,0,0,0.5);}

 

rgba is supported by all mozilla and webkit browsers. Declare a background colour before the rgba declaration to act as a fallback for any browsers that don't support rgba. In the rgba declaration the first 3 values are the rgb values and the last is the alpha value.

[jcombs_31]

I think the easiest and better solution is to use a transparent png.

[Axeia]

I think the easiest and better solution is to use a transparent png.

*nods*

 

At least it will work in all browsers (excluding IE <= 6)

[jackpf]

Anyone still using that deserves to be brutally slaughtered.