How To Make child does not inherit the transparency of parent in CSS

Discussion in 'CSS' started by lionking, Jun 4, 2011.

0
  1. #1
    Hello everybody

    I have question in CSS
    How To Make child does not inherit the transparency of parent using (opacity property)

    Example

    
<div id="Parent" style="opacity:0.6"> 
  <div id="child"> </div>
</div>
    PHP:
    In the previous example, I added two div the first div is parent and parent contain child div .

    I added opacity property to parent div .
    in this case, the son inherited opacity property also .
    I don't want to inherit child parent .

    How this can be done
     
    lionking, Jun 4, 2011 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    In theory you are supposed to be able to use a >1 opacity to return it to normal (1 / 0.6 == 1.666, I'd round up to 1.7)

    BUT, not all browsers support that properly (if at all). I believe Opera does, and that's about IT.

    Depending on the element you are applying it to you can often fake the appearance of doing that by making two siblings inside the parent wrapper, one with the opacity and APO'd with the latter being relative positioned to depth sort over it's sibling. This is only really useful for doing opacity backgrounds without alpha.png and requires expressions to nab the width properly in IE -- so I'd not entirely recommend that approach.

    It's one of those "we should be able to do it, but we can't" moments that comes up with many CSS properties.
     
    deathshadow, Jun 5, 2011 IP