Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    Hello everybody

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

    Example

    PHP Code:
    <div id="Parent" style="opacity:0.6"
      <
    div id="child"> </div>
    </
    div
    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

  • #2
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    You can set all your content in a DIV that is relatively positioned, then your second DIV (with the transparency) absolutely positioned, then your content within that DIV, relatively positioned (your content with no transparency). So add a container...

    Code:
     
    <div id="container">
    <div id="Parent"> 
      <div id="child"> </div>
    </div>  
    </div>
    #container { position: relative; }
    #parent { position: absolute; top: 0; right: 0; opacity:0.6; filter:alpha(opacity=60); -moz-opacity:0.6; }
    #child { position: relative; }
    Last edited by Mr.; 06-04-2011 at 07:15 PM.

  • #3
    New Coder
    Join Date
    May 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunately, The problem still exists

  • #4
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by lionking2 View Post
    Unfortunately, The problem still exists
    It Should work, can you send me the HTML and CSS you're using to fix this?

  • #5
    New Coder
    Join Date
    May 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    See the button when the experiment
    This is example

    HTML
    PHP Code:
    <input type="button" name="btn" id="btn" value="OK" />

    <
    div id="container">
      <
    div id="Parent">
            <
    div id="child"></div>
      </
    div>
    </
    div

    CSS
    PHP Code:
    #container {
      
    positionrelative;
    }         
    #Parent {
      
    top0;
      
    left0;
      
    positionfixed;
      
    width100%;
      
    height100%;
      
    opacity0.6;
      
    background-color#ff0000;
    }
                
    #child {
      
    width640px;
      
    height480px;
      
    color#000;
      
    positionrelative;
      
    background-color#ffffff;


  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I haven't used opacity yet but, if the parent is set to 0.5, what about setting the child to 2.

    It might be like em. if a page text is set to be 1em and a parent div is set to 2 em. then its child wants to show text at normal size; it has to be set to 0.5 em because of its parent being twice normal size.

    It's a relativity thing.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #7
    Mr.
    Mr. is offline
    Regular Coder
    Join Date
    Feb 2011
    Posts
    112
    Thanks
    8
    Thanked 4 Times in 4 Posts
    This code demonstrates the effect when done properly. I may have missed a few styles, but also I can't see anything demonstrated in your code because of the lack of content.


    Code:
     <style>
    
    body
    {
    	background-color: #F03;
    	font-size:12px;
    	font-family:Arial, Helvetica, sans-serif;
    }
    
    h1
    {
    	padding:0px;
    	margin:0px;
    	font-size:20px;
    	padding-bottom:10px;
    }
    
    #container
    {
    	padding:20px;
    	width:300px;
    	color:#FFFFFF;
    	position:relative;
    	background-color:#000000;
    	float:left;
    	opacity:0.5;
    	filter:alpha(opacity=50);
    	-moz-opacity:0.5;
    }
    
    #container2
    {
    	padding:20px;
    	width:300px;
    	color:#FFFFFF;
    	position:relative;
    	float:left;
    	margin-left:20px;
    	overflow:hidden;
    }
    
    .transparency
    {
    	opacity:0.5;
    	filter:alpha(opacity=50);
    	-moz-opacity:0.5;
    	background-color:#000000;
    	width:340px;
    	height:1500px;
    	position:absolute;
    	top:0px;
    	left:0px;
    }
    
    .content
    {
    	position:relative;
    }
    
    
    </style>
    </head>
    
    <body>
    	
        <!-- container one starts -->
        <div id="container">
        
        	<h1>Children inherit the opacity</h1>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean gravida. Sed blandit, neque non adipiscing sagittis, tortor nisi consequat eros, a posuere sem augue sit amet nibh. Morbi at leo. Vestibulum porta, eros id congue molestie, leo eros facilisis neque, at ullamcorper nisi mauris non quam. Suspendisse vel erat vel nulla molestie egestas. In sit amet mauris quis eros elementum semper. Curabitur suscipit molestie nibh. In euismod ligula vel diam pharetra feugiat. Morbi suscipit fermentum elit. Curabitur imperdiet urna eu sapien.
       
        </div>
        <!-- container one ends -->
        
        <!-- container two starts -->
        <div id="container2">
        
        	<div class="transparency">
            	&nbsp;
            </div>
            
            <div class="content">
            	
                <h1>Using layers and positioning so children have 100% opacity</h1>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean gravida. Sed blandit, neque non adipiscing sagittis, tortor nisi consequat eros, a posuere sem augue sit amet nibh. Morbi at leo. Vestibulum porta, eros id congue molestie, leo eros facilisis neque, at ullamcorper nisi mauris non quam. Suspendisse vel erat vel nulla molestie egestas. In sit amet mauris quis eros elementum semper. Curabitur suscipit molestie nibh. In euismod ligula vel diam pharetra feugiat. Morbi suscipit fermentum elit. Curabitur imperdiet urna eu sapien.
    
            </div>
      
        </div>
        <!-- container two ends -->
    
    </body>

  • #8
    New Coder
    Join Date
    May 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks Mr. for your help , but I want the parent is who is transparent, not the child
    because i want to make lightbox (parent div is transparent but the child div not transparent)
    Last edited by lionking2; 06-05-2011 at 09:29 AM.

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    This site explains how to achieve opaque children (this doesn't sound very politically correct..).

    Basically, because transparency is inherited we have to use positioning to create a separate div that is positioned on top of the transparent div.

    An alternative would be to use a semi-transparent .png image as a background to the div.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    blimey Andrew the specs seem to me overly-convoluted. It would be much more consistent, if they had set it to be inherited unless overriden, just as is the case with ems.

    I must start using opaqueness and see what I can rustle up. likely won't be anything spectacular lol

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,787
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    You can’t have 100% opaque children inside a (semi)transparent parent. That’s just how it is. Because if the parent has 80% opacity and the child has 100% opactiy, what’s 100% of 80%? Still 80%. And there is no such thing as more than 100% opacity so any value above “1” will be ignored.

    However, in modern browsers you can use rgba() to set the color of something with an alpha transparency. And this is not inherited, because it’s only a property of the element you change, not the element itself.
    For example:
    Code:
    #parent {background-color: rgba(255,255,255,0.5);} /* that’s white with 50% transparency */

  • #12
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The browser of most concern with rgba is IE8 (and below) .. of course

    A fallback for IE8 (using a filter) is discussed here.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •