Topic: CSS opacity question

Hey guys, got a question that I was wondering if someone could give me some input on.

Working on a site for a friend at the moment, and I created a div, and made some corner images that goes inside it, and set the opacity to 50%. Well, the problem is, the CSS opacity element says that a div, span, etc.. and anything within it, including text, etc..., inherit that opacity.

Well I wanted to know if someone knows a trick to get around this. I want in this case, my div at 50% opacity, but the text in the div, at 100%, and I've tried a few things, of having a paragraph positioned outside the div, but over it still, and it still inherits that opacity, and so on.

Does someone know a trick to get around opacity inheritance?

Re: CSS opacity question

I would think that doing something like this would work.

<div id="hello"> 
  <p> Text </p>

#hello {
  //css rules with opacity
     #hello p {
       //css rules and reset opacity

I'm just thinking out loud here and I have not tested this so it may not even work.


Re: CSS opacity question

Yeah, I tried that actually. I was hoping it was as simple as that too... wink

I found this article at … explorer/, that says there is a work around for IE, but most of the users of this site is going to be on Firefox, so that doesn't entirely help...

Re: CSS opacity question

Sadly, there's no good solution for this. The easiest workaround is actually to make the images, div background, whatever semi-transparent PNG files and then use the below fix to make those work in IE