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

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.