www.webdeveloper.com
Results 1 to 9 of 9

Thread: Lower div opacity - keep inside divs opacity at 100%

  1. #1
    Join Date
    Jun 2011
    Posts
    6

    Lower div opacity - keep inside divs opacity at 100%

    Hi, so this is my situation.

    The background of the body is whole black. I created a div (a block of 100% height and 208 px wide) and I lowered it's opacity at 0.6. But inside that div I want to create another divs and I don't want them to have 0.6 opacity as well, I want them to NOT BE transparent AT ALL.

    Does anyone have an idea about how can I do this? Thanks in advance.

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there ducanul,

    this will work in modern browsers...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    html,body {
        height:100&#37;;
        margin:0;
        background-color:#000;
     }
    #container {
        width:208px;
        height:100%;
        background-color:rgba(255,0,0,0.6);
     }
    #another-div {
        padding:10px;
        font-size:36px;
        text-align:center;
        background-color:#fff;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
     <div id="another-div">text</div>
    </div>
    
    </body>
    </html>
    
    ...and this will work in legacy browsers...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    html,body {
        height:100%;
        margin:0;
        background-color:#000;
     }
    #container {
        position:relative;
        width:208px;
        height:100%;
     }
    #background {
        position:absolute;
        width:100%;
        height:100%;
        background-color:#f00;
        opacity:0.6;
        filter:alpha(opacity=60);
     }
    #another-div {
        position:absolute;
        width:188px;
        padding:10px;
        font-size:36px;
        text-align:center;
        background-color:#fff;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
     <div id="background"></div>
     <div id="another-div">text</div>
    </div>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 11-21-2011 at 01:07 PM.

  3. #3
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    I wasn't aware RGBA was widely supported. Define "modern browser" ... or link to a compatibility chart, please.
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  4. #4
    Join Date
    Mar 2011
    Posts
    1,137
    Internet Explorer added support for rgba with v9.0. Everybody else has supported it for years.

    The best tool for compatibility I've ever seen is When Can I Use?. Enter any CSS or HTML into the box and you get a complete compatabilty chart for both desktop and mobile browsers, with helpful implementation links. Just amazing.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Quote Originally Posted by svidgen View Post
    .. Define "modern browser" ... or link to a compatibility chart...
    I will do both...
    1. Firefox 3.5+, IE9, Opera 10+, Safari 4+ and Chrome.
    2. http://caniuse.com

    coothead

  6. #6
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Quote Originally Posted by coothead View Post
    I will do both...
    1. Firefox 3.5+, IE9, Opera 10+, Safari 4+ and Chrome.
    2. http://caniuse.com

    coothead
    Very important details for the OP, since a very large portion of folks, upwards of 50% for many sites, are using what you've declared a legacy browser.
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

  7. #7
    Join Date
    Jun 2011
    Posts
    6
    @coothead, Thank you a lot! And thanks everyone for all the trivia stuff about modern browsers you posted here!

  8. #8
    Join Date
    Nov 2011
    Posts
    3
    You can also employ a 1px by 1px semi-transparent png, for the background of the div. It can be made to work with older browsers with this plugin: http://jquery.andreaseberhard.de/pngFix/

  9. #9
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Quote Originally Posted by ducanul View Post
    @coothead, Thank you a lot! And thanks everyone for all the trivia stuff about modern browsers you posted here!
    It's not necessarily "trivia" when it affects 20 to 60% of your visitors ...
    Jon Wire

    thepointless.com | rounded corner generator

    I agree with Apple. Flash is just terrible.

    Use CODE tags!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles