Paragraph with normal opacity within greyed-out div

Question

I am greying out a web page when a user doesn't have permission to access it. In order to do that, I am placing a div with background-color white and a lowered opacity on top of the web page. I want to write some words in that div with the words having a normal opacity.

As of now, the greyed out background is showing correctly. However, I can't seem to get the words to be a regular opacity. The derived styles on Firebug show the opacity on the words as normal, but it clearly isn't.

What am I doing wrong?

The HTML:

<div class="noPermission">
    <p>I'm sorry. You do not have permission to access this page.</p>
</div>

The CSS:

div.noPermission {
    background-color: white;
        filter:alpha(opacity=50); /* IE */
        opacity: 0.5; /* Safari, Opera */
        -moz-opacity:0.50; /* FireFox */
        z-index: 20;
        height: 100%;
        width: 100%;
    background-repeat:no-repeat;
        background-position:center;
        position:absolute;
        top: 0px;
        left: 0px;
}

div.noPermission p{
    color: black;
    margin: 300px auto auto 50px;
    text-align: left;
    font-weight: bold;
    font-size: 18px;
    display: block;
    width: 250px;
}

Answer 1

Have you thought about using a custom jQuery tool like BlockUI

Answer 2

I'd tackle this by having two stacked divs. The bottom one consisting of solely color and opacity, and the top one having text with a transparent background.

Answer 3

Try something more like this:

<div class="noPermission">
    <div class="noPermission">
        &nbsp;
    </div>
    <p>I'm sorry. You do not have permission to access this page.</p>
</div>

... and

div.noPermission div.noPermission {
    background-color: white;
    filter:alpha(opacity=50); /* IE */
    opacity: 0.5; /* Safari, Opera */
    -moz-opacity:0.50; /* FireFox */
    z-index: 20;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;
    position:absolute;
    top: 0px;
    left: 0px;
}

div.noPermission p {
    color: black;
    margin: 300px auto auto 50px;
    text-align: left;
    font-weight: bold;
    font-size: 18px;
    display: block;
    width: 250px;
    position:absolute;
    z-index:30;
    top: 0px;
    left: 0px;
}

Answer 4

Use an rgba value on the background to affect its opacity without altering the main foreground font's, e.g.:

div.noPermission { background-color: rgba(255, 255, 255, 0.5); }

As with many recent CSS advances, this will not work in older browsers, but so long as it's not mission-critical, that shouldn't be a concern.