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

Thread: opacity

  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts

    opacity

    If I have a first element with an opacity attributed to it and I place a second element inside/on top of the first one.... how can I make the second element non-opacity?
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    With positioning and z-index properties it is possible.... but position value can be absolute only and parent element of both elements should have position:relative defined to it


  • #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    Hi there Asher01,

    here is a basic example...
    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>untitled document</title>
    
    <style type="text/css">
    body {
        background-color:#00f;
     }
    #container {
        position:relative;
        width:440px;
        margin:auto;
     }
    #faded {
        width:400px;
        height:360px;
        padding:40px;
        background-color:#f00;
        border:4px solid #000;
        opacity:0.30;
        filter:alpha(opacity=30);
        font-size:30px;
        font-weight:bold;
        text-align:center;
     }
    #unfaded {
        position:absolute;
        z-index:1;
        left:84px;
        top:189px;
        width:300px; 
        padding:10px;   
        border:2px solid #000;
        font-size:30px;
        font-weight:bold;
        text-align:center;
        background-color:#fff;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="faded">this area is effected by opacity</div>
    
    <div id="unfaded">this area is unaffected</div>
    
    </div>
    
    </body>
    </html>
    
    coothead

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    You can’t since opacity is always inherited. If the parent has 80% opcacity and the child 100% opacity then all in all it’s still 80% (100% of 80% is still 80%, and there is no more than 100% opacity). Depending on what you are trying to achieve you may be able to use an RGBA background color on the parent (“A” standing for “alpha value”, i. e. transparency), like background-color: rgba(255,255,255,.5); but this won’t work in IE. Alternatively you can make the child a sibling of the parent and position it absolutely on top of it.

  • #5
    New Coder
    Join Date
    Jul 2011
    Location
    Australia
    Posts
    47
    Thanks
    1
    Thanked 3 Times in 3 Posts
    Oh OK, I see... that makes perfect sense now that you say that.

    I'll have to do something like Coot's example... find the first non-opacity and then work from that.

    Thank you, all three of you.
    Cheers!
    Asher
    “Opinion is the medium between knowledge and ignorance.”
    “The old believe everything; the middle aged suspect everything: the young know everything.”

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,699
    Thanks
    0
    Thanked 233 Times in 228 Posts
    No problem, you're welcome.


  •  

    Posting Permissions

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