CSS: semi-transparent background, but not text
- by Stijn Sanders
Is there a way in CSS to make the background of an element semi-transparent, but still have the text of the element non-transparent? (Without separating the text and background in two elements positioned over eachother.) I've tried
<p style="position:absolute;background-color:green;filter:alpha(opacity=60);opacity:.6;"><span style="color:white;filter:alpha(opacity=100);opacity:1;">Hello world</span></p>
But it looks like child elements are subjected to the opacity of their parent(s), so 'opacity:1' is still drawn as 'opacity:.6' from the parent.