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 5 of 5
  1. #1
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post

    Need full opacity (1.0) in inner DIV and 0.5 opacity in outer DIV.

    Hi,

    I want to have two DIVs, one is outer and another one is inner. I want to have my outer DIV to have the lower opacity and
    the inner DIV to have 1.0 (no opacity), but looks like the inner is inheriting the opacity from the outer even if I make the opacity
    to be 1.0 in the CSS for the inner div. Look at the code below:


    Code:
    <div id="outer"  style="width:500px;height:500px;background-color:black;opacity:0.5">
    
       <div id="inner"  style="width:200px;height:200px;background-color:white;opacity:1.0">
    
             <img src="/link/here.png">
    
       </div>
    
    </div>

    []

    I have the example website below ;

    http://store.touchmedia.ca/mytest/test-opacity.php


    You can click on any images. But for my question, click on the 2nd picture (bus running on railway track).

    In the above example, I want to make that white color background to be of opacity 1.0 (ie, I don't want to see anything behind the white color or its contents)

    thanks,

    Isaac
    Last edited by Isaac Sureshkum; 02-12-2014 at 05:47 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,092
    Thanks
    23
    Thanked 594 Times in 593 Posts
    My editor choked on your double quotes. I had to replace every ” with ".
    See the difference?
    Once that was done things just worked.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post
    Thank you. Yeah, I copied it directly from the NetBeans editor, that may have caused the issue. I have corrected it now.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,636
    Thanks
    6
    Thanked 1,003 Times in 976 Posts
    Yes, opacity is inherited. And 100% opactiy of 90% opacity is still 90%.
    You need to change the opacity of the background color, not the element itself. For this there is an rgba() (RGB with alpha transparency) value for the color properties:
    Code:
    background-color: rgba(0,0,0,.5);
    The first three digits are values for red, green, and blue, respectively (from 0 to 255 — “0,0,0” is black and “255,255,255” is white), and the last one is for the alpha value. 1 is completely opaque and 0 is completely transparent.
    And this is possible with anything that can take a color in CSS, like (text-)color, border-color, etc.

  • Users who have thanked VIPStephan for this post:

    Isaac Sureshkum (02-12-2014)

  • #5
    New Coder
    Join Date
    Jun 2013
    Location
    Calgary AB,Canada
    Posts
    55
    Thanks
    28
    Thanked 1 Time in 1 Post
    Thank you Stephan.


  •  

    Tags for this Thread

    Posting Permissions

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