代码之家 › 专栏 › 技术社区 › newbie

为什么CSS不透明度会影响上面的div?

opacity overlay css html

newbie · 技术社区 · 16 年前

编辑:我只在最新的Firefox上测试过。

.overlay {
    z-index: 1000;
    border: medium none;
    margin: 0pt;
    padding: 0pt;
    width: 100%;
    height: 100%;
    top: 0pt;
    left: 0pt;
    background-color: #fff;
    opacity: 0.6;
    cursor: wait;
    position: absolute;
}
.overlay .message {
    z-index: 1001;
    position: absolute;
    padding: 0px;
    margin: auto;
    width: 30%;
    top: 15%;
    left: 30%;
    text-align: center;
    color: #fff;
    border: 3px solid red;
    background-color: #fff;
    background: fuchsia;
    font-size: 18px;
    font-weight: bold;
    padding: 5%;
}

下面是HTML代码:

<div class="overlay">
    <div class="message">
        test
    </div>
</div>

1 回复 | 直到 16 年前

Gumbo 16 年前

不透明度不仅影响元素本身,而且影响所有元素覆盖 (所以消息也是)。如果您将覆盖和消息分开,它将起作用:

<div class="modal">
    <div class="overlay">overlay</div>
    <div class="message">message</div>
</div>

.modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.overlay {
    /* â¦ */
}
.message {
    /* â¦ */
}

在这里消息覆盖覆盖这是我的风格。

推荐文章

camjames · Android Studio中的不透明度级别

8 年前

david · 标题栏中的滑块小部件

8 年前

David C. · 同级元素继承不透明度

8 年前

lulZghost · css不透明度转换不工作

8 年前

paulcook · CSS带渐变遮罩的垂直滚动字幕

8 年前

dzierzak · 谷歌表格图表-如何设置行的透明度?

8 年前

Vandan Shah · 粘性表格标题结构中的不透明度问题

8 年前

Jakob · 禁用(neo)vim中的背景透明度

8 年前

user8646839 · 我可以在Android Google map API中设置多段线不透明度吗

8 年前

Arkadis Stepanov · CSS不透明度在li中不起作用

9 年前