I know opacity is always inherited by definition, but is there an easy way (easier than making 3 divs - container, one with defined transparency and third one with content) to avoid inheritance of opacity?
There are a few bits of reading that might answer your question.
According to Sitepoint forum thread, there’s nothing you can do - the opacity is applied to the parent element after child elements have been drawn, which is why child elements will look washed out but won’t actually be semi-transparent.
Impressive Webs has a hacky way to achieve the effect you’re after, although doesn’t recommend using it.
Edit: Oops, just spotted that Ralph has already given that one…
Steven York seems to have a better solution. Essentially, any solution is likely to involve having a faux-child element that is positioned so it looks like a child element, but is actually outside the parent element.
(Oh, and about not messing with the HTML? If you give me a <p> inside a <span>, I’m not going to leave that untouched! That is seriously not allowed, and is likely to cause untold problems for you)