CSS opacity to parent not to childs

Question

Possible Duplicate:
how to not apply opacity for child element?

Which is the best practice to set opacity:0.5; to the parent element like:

<div>
<span></span>

<span></span>

<span></span>
</div>

if i set opacity to the element this will set the same rule to the children elements, is there any trick to avoid the children inherition?

You can't stop inheritance. You can however override it. Setting opacity: 0.5 on div will be inherited by the spans and to counter it you need to set opacity:1 on spans. — Jawad, Oct 19 '12 at 17:21
childs inherit in their rules as i see, font-color for example — itsme, Oct 19 '12 at 17:25
@BoltClock: http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/ — Jawad, Oct 19 '12 at 17:25
@Jawad i was asking my self if there was trick to avoid that effectively — itsme, Oct 19 '12 at 17:25
And: http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css — Jawad, Oct 19 '12 at 17:27
And: http://stackoverflow.com/questions/2636871/is-opacity-is-inherited-in-a-div — Jawad, Oct 19 '12 at 17:27
http://piddmedia.com/tutorials/cross-browser-opacity-that-stops-inheritance/ — Jawad, Oct 19 '12 at 17:28

score 2 · Accepted Answer · answered Oct 19 '12 at 17:19

2

You can use css3 background-color:rgba(122,122,0,0.5); the last value is the opacity, and it dont force the child elements to get it.

answered Oct 19 '12 at 17:19

Toping

This works. [Demo](http://jsfiddle.net/qXJJm/1/). – Roddy of the Frozen Peas Oct 19 '12 at 17:26
For cross-browser support, use PNG 24 image instead. RGBA is for CSS3 compatible only. – SequenceDigitale.com Oct 19 '12 at 20:17

Ravindra Bagale · Answer 2 · 2012-10-19T17:30:32.010

0

use rgba,

 background-color: rgba(0,0,255,0.5);

edited Oct 19 '12 at 17:30

answered Oct 19 '12 at 17:21

Ravindra Bagale

2 Answers2