1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS DIV Transparency Without Affecting Child

Discussion in 'CSS' started by JeremiasRama, Nov 23, 2015.

  1. #1
    Here's my CSS code
    #loginbox {
        padding:10px;
        background:#000000;
        border-top-left-radius:5px;
        border-top-right-radius:5px;
        border-bottom-left-radius:5px;
        border-bottom-right-radius:5px;
        opacity: 0.6;
        width:300;
        height: 200px;
        box-shadow: 10px 10px 5px #0000000;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -150px;
        color: #FFFFFF;
    }
    #loginform{
        position: absolute;
        border: 1px solid red;
        color: white;
    }
    Code (CSS):
    Here's the HTML
        <body>
            <div id="loginbox">
                <table style="loginform">
                    <tr>
                        <th>Firstname </th>
                        <th>Lastname</th>
                    </tr>
                    <tr>
                        <td>Peter</td>
                        <td>Griffin</td>
                    </tr>
                    <tr>
                        <td>Lois</td>
                        <td>Griffin</td>
                    </tr>
                </table>
            </div>
        </body>
    HTML:
    But here what it looks like:
    a1.jpg
    a2.jpg
    Unless I block the text or set the font color into white, the text won't visible.
    Also, when you look at the code, I've tried using
        color: white;
    Code (markup):
    but the font color still black.

    Thanks :D
     
    Last edited: Nov 23, 2015
    JeremiasRama, Nov 23, 2015 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Opacity doesn't work like that. To get a transparent background without affecting the content, use rgba() to set the background.
    rgba(0,0,0,0.6);
     
    PoPSiCLe, Nov 23, 2015 IP
  3. JeremiasRama

    JeremiasRama Member

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #3
    thank you for your response,
    but it doesn't work.

    I've tried.
    1) Place: rgba(0,0,0,0.6); and remove opacity: 0.6; without changing anything at all, the box is now pitch black (Transparency doesn't work)
    2) Erased: background:#000000; the box disappears
     
    JeremiasRama, Nov 23, 2015 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Did you do this?
    
    #loginbox {
        padding:10px;
        background-color: rgba(0, 0, 0, 0.6);
        ...;}
    Code (markup):
    Exactly?

    Did you omit a semi-colon or closing brace? Either will produce a fatal error.

    Did you run your stylesheet through the W3C validator? That is always the first step.

    cheers,

    gary
     
    kk5st, Nov 23, 2015 IP
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #5
    Do what @PoPSiCLe suggested.

    Here's your code slightly modified. Ignore the body background css there. I just wanted to make sure opacity works like it should:

    http://jsfiddle.net/h8j85Lox/6/
     
    qwikad.com, Nov 23, 2015 IP
  6. JeremiasRama

    JeremiasRama Member

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #6
    THANK YOU IT WORKS :D
     
    JeremiasRama, Nov 23, 2015 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    Good. CSS's syntax makes it easy to screw up, and difficult to catch. The validator will save you a lot of grief. So will a consistent formatting scheme. I say emphatically that you should never put the rulesets on a single line. Always put each property and it value on its own line, and indent it. For example:
    
    selector {
        property: value;
        property: value;
        }
    Code (markup):
    Always format for readability by humans.

    cheers,

    gary
     
    kk5st, Nov 24, 2015 IP