Opacity Inheritence

[treyrust]

I’m working on my new portfolio site, which has a semi-transparent container DIV, and inside it is a solid colored DIV.

But that’s just the problem. I’m trying to do all of this with CSS3, but the opacity from the container is inherited to the content DIV.

I’ve found some hackey solutions, but is there anything I could do otherwise? I would like to keep my code as clean as possible…

My only other thought would be to just use POSITION and overlap the two elements, but I don’t like that “solution” at all.

Trey.

[TheDoc]

You’ve hit the nail on the head, the only way around that is some absolute positioning and z-index.

There is this: http://piddmedia.com/tutorials/cross-browser-opacity-that-stops-inheritance/ …but I haven’t tried it.

[treyrust]

Position wouldn’t work, because I want the container transparent and the content solid. so it would have to be in the container if I wanted it to move with the content, which I do.

But yeah, RGBA works perfectly, Thanks!

And I don’t care if it doesn’t work in older versions of I.E. I’m using so much CSS3 its just a joke to try and make this one thing work…

Trey.

[OniLinkCR]

Damnit, I wish I had bumped in to this earlier; there needs to be a fix to the opacity rule on CSS3 so you can overrule it like other rules. Oh well, RGBA next time it is.

[Author]

Posts