SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2010
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    filter/opacity question?

    im trying to make 3 seperate overlapping divs with a filter bg
    the first div is to be a containing div opacity 30
    the second div w/in the first div bg opacity 30
    then overlapping the second div with 100 percent visible content
    b and c need to be the same size
    im trying to make it so u can still see the body background
    i tried using the z-index with no luck

    <div id="a">
    <div id="b"></div>
    <div id="c">content</div>
    </div>

    body{
    background-image=""
    }
    #a{
    background-color:#000;
    filter:alpha(opacity=30);
    opacity:0.3;
    }
    #b{
    background-color:#000;
    filter:alpha(opacity=30);
    opacity:0.3;
    position:absolute;
    z-index:1;
    }
    #c{
    filter:alpha(opacity=100);
    opacity:1;
    position:absolute;
    z-index:2;
    }

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    With divs inside other divs that have opacity less than 100% the child will inherit the parent opacity. In your example you didn't give your divs any width or height, so you couldn't see the result. Here is an example where the divs are independent of each other, so the opacity can be set as required. You will need to adjust the positioning to achieve your other objectives.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Opacity of overlapping divs</title>
    <script type="text/javascript">
    <!--
     
    //-->
    </script>
    <style type="text/css">
    <!--
    body { 
    font-family:arial, helvetica, sans-serif;
    font-weight:bold; 
    font-size:13px; 
    color:#000; text-align:center;
    margin:3px 0px; 
    }
     
    #wrap { 
    position:relative; 
    top:0px; 
    left:0px; 
    width:900px; 
    height:500px; 
    margin:0px auto; 
    text-align:left;
    }
     
    #a{
    position:relative;
    top:0px;
    left:0px;
    z-index:1;
    width:400px; 
    height:400px; 
    background-color:#0FF;
    filter:alpha(opacity=30); 
    opacity:0.3; 
    border:1px solid #000;
    }
     
    #b{
    position:absolute;
    top:25px;
    left:5px;
    z-index:2;
    width:200px; 
    height:300px; 
    background-color:#F00;
    filter:alpha(opacity=50);
    opacity:0.5;
    }
     
    #c{
    position:absolute;
    top:50px;
    left:30px;
    width:100px; 
    height:100px; 
    background-color:#FFF;
    filter:alpha(opacity=100);
    opacity:1;
    z-index:3;
    }      
     
    -->
    </style>
    </head>
     
    <body>
     
    <div id="wrap">
      <div id="a">
        Opacity 30%
      </div>
      <!-- end a -->
      <div id="b">
        Opacity 50%
      </div>
      <div id="c">
        Opacity 100%
      </div>
    </div>
    <!-- end wrap -->
     
    </body>
     
    </html>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,553
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you want non transparent elements on top of transparent ones then its quite awkward to do (without using css3 rgba) because as mentioned above any elements inside a div that has opacity applied will be affected by that opacity and it cannot be reversed.

    We had a quiz here that shows how it can be done but is a little complicated. Here's a live example. The basis is that the transparency is applied via a separate div that holds no content and is then overlaid where required so that children are not affected.

    I need to see exactly what you wanted to provide a closer example.


Bookmarks

Posting Permissions

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