I want to have a transparent div that does not affect the content. I have applied transparency to the header section, which contains a navigation div and a logo div, but do not want the transparency to apply to those two other divs.Is there a way to fix this.
I used the following code:
Opacity values will always cascade down to child elements - you can't have opacity:0.5 on a parent div, then set opacity:1 to a child div.
Will using a 50% transparent PNG or rgba value on the header div do the same job?
Yes, that's a good option that works across older browsers too. But what I'd do these days is use RGBA:
That's a white background set to 50% opacity. You can, of course, change that to any other RGB color.