Question

当用户无权访问网页时，我会将网页灰显。为了做到这一点，我在网页顶部放置一个背景色为白色且不透明度较低的div。我想在该div中写一些具有正常不透明度的单词。

截至目前，灰色背景显示正确。但是，我似乎无法将这些词语视为常规的不透明度。 Firebug上的派生样式显示单词的不透明度正常，但显然不是。

我做错了什么？

HTML：

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

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

您是否考虑过使用自定义jQuery工具，例如BlockUI

Answer 2

我要通过两个堆叠的div来解决这个问题。底部仅由颜色和不透明度组成，顶部一个具有透明背景的文本。

Answer 3

尝试更像这样的事情：

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

...和

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

在背景上使用rgba值来影响其不透明度而不改变主前景字体，例如：

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

与最近的许多CSS进展一样，这在旧版浏览器中不起作用，但只要它不是关键任务，那就不应该关注。

Answer 5

只需创建一个带透明度的1px x 1px 50％白色png，然后将其用作div的背景图像。 Simples！

灰色div中具有正常不透明度的段落

5 个答案: