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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Setting opaque/opacity, but not text/images

    I want to set a div background color to opaque, but I don't want the images/text inside the div to also be opaque, is this possible?

  • #2
    Regular Coder Troy297's Avatar
    Join Date
    Oct 2006
    Location
    Earth
    Posts
    314
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Um.... you would have to use CSS to do that sort of stuff.... I'm not sure but possibly something like the below would do it... anyone else got ideas?

    Code:
    div {
    opacity: 50%;
    }
    div.font {
    opacity: 100%;
    }
    div.img {
    opacity: 100%;
    }
    I've never actually tried opactiy & stuff using divs, just iframes... but you can try the above... it might work! Sorry.... thats all the help I can give.
    Everyone hears what you say, friends listen to what you say, best friends listen to what you don't say.
    Radio DJ Panel v3 - It's Here!

  • #3
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tried it, didn't work. Thanks for trying though. Appreciated.

  • #4
    Regular Coder
    Join Date
    Apr 2006
    Posts
    117
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Can you take a screenshot and show me what in it you want to be transparent/translucent?

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Stick:

    #div {
    opacity: .5;
    filter: alpha(opacity=50);
    }

    as your outer div, then for any elements within try:

    #div .element {
    opacity: 1;
    filter: alpha(opacity=100);
    }
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,710
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there mh3|_p,

    I believe that you will have to use absolute positioning to achieve this.
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    body {
        background-color:#00f;
        background-color:#00f;
     }
    #faded {
        width:400px;
        height:360px;
        padding-top:40px;
        background-color:#f00;
        border:4px solid #000;
        opacity:0.50;
        filter:alpha(opacity=50);
        text-align:center;
     }
    #unfaded {
        position:absolute;
        z-index:1;
        left:64px;
        top:189px;
        width:300px;
        height:50px;
        font-size:30px;
        font-weight:bold;
        text-align:center;
     }
    </style>
    
    </head>
    <body>
    
    <div id="faded">this text is effected by opacity</div>
    
    <div id="unfaded">this stays black</div>
    
    </body>
    </html>
    
    coothead


  •  

    Posting Permissions

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