How to make the text of sub elements not gain the parents Opacity setting?

[Samishii23]

<div style="opacity: 0.5; background-color: #000;">
    <span style="opacity: 1.0;">Testing</span>
</div>

I know from this example, that sub-elements automatically inherit the parents styling, but is there anyway for me to be able to make the Text ( sub elements ) not gain the parents Opacity setting?

Or am I going to have to do absolute positioning with this? =\

[Death Slaught]

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

[Samishii23]

Yea I have the Opacity filters for IE, Mozilla, Webkit etc.
Sounds like i'll have to make 2 divs and place one over the other, or will that not work either?

[Death Slaught]

No, that wouldn't work either because your new division, and its content, would be contained by the parent division that has the opacity filter placed over it. Just to clarify, let's say that you put an opacity filter over the body element.

body {
    opacity: 0.5;
}

Now everything that you put inside of the body element is going to be affected by the opacity because the filter is being placed over it, and everything it contains.

One option would be; and I just realized that this may be what you meant before; would be to move the text outside of the division, and then absolutely position it to set on top of the division. The division of course would need a set width and height. Also, you could change the background color, the color of the text, or use a background image instead.


Regards, Death