Opacity is essentially a filter - It is placed over the element rather than being part of the element. Yes, the sub-element is inheriting the parents styling, but the opacity is being negated by the sub-elements styling. The browser will always use the style that is listed last.
It really doesn't matter what you set the opacity of your span to, if you absolutely position it, or just about anything really. The span is contained within a division with an opacity filter being placed over
it,
and its content. In other words, the span has an opacity of 1.0 and has an opacity of 0.5 being placed over it, making it the same color as the background.
Also, please remember that opacity is not supported in IE. You will have to use,
- div {
-
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE8, must be listed first. */
-
filter: alpha(opacity=50); /* IE5-7, must be listed second. */
-
}
Regards, Death