Question

我有一个进度条，需要位于叠加层之上，这里是破碎的jsfiddle

标记：

<div class="overlay mouse-events-off">
    <div class="progress progress-striped active">
        <div class="bar" style="width: 40%;"></div>
    </div>
</div>

CSS：

.overlay { background-color: black; position: fixed; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.2; /* also -moz-opacity, etc. */ z-index: 100; }
.progress { position: absolute; top: 50%; left: 35%; width:300px; height:20px; z-index:101; opacity:1.0; }

进度条的不透明度也是20％。

我有一个修复方法，只需将带有进度条的<div>放在其工作的叠加层之外。但似乎是额外加价

工作加价：

<div id="progress" style="display:none;">
    <div class="progress progress-striped active glow">
        <div class="bar" style="width: 40%;"></div>
    </div>
    <div class="overlay mouse-events-off"></div>
</div>

有没有更优雅的方法来解决这个问题？

Answer 1

使用opacity时，该元素中的所有内容也会受到影响，无法解决问题。

您有两种方法：

外部进展

将进度放在叠加层之外并使用它来居中覆盖顶部。

.progress {
    position: absolute;
    top: 50%;
    left: 50%;
    width:300px;
    height:20px;
    margin:-10px 0 0 -150px; //half width left, half height top
    z-index:101;
    opacity:1.0;
}

保持原样

不要在元素本身上使用不透明度，而是在背景上使用！

.overlay {
    background-color: black; /*older browsers*/
    background-color: rgba(0,0,0,.2); /*new ones will overwrite the 'black' declaration with rgba*/
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*opacity:0.2; no opacity!*/
    z-index: 100;
}

这是第二个jsFiddle： http://jsfiddle.net/Qpv4E/2/

Answer 2

以下是同一个问题：I do not want to inherit the child opacity from the parent in CSS

希望RaphaelDDL的答案会有所帮助。

覆盖层顶部的不透明进度条

2 个答案:

外部进展

保持原样