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: 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
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);
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
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
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/
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