2

我有一个进度条需要位于覆盖层之上，这是损坏的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>

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

4

2 回答 2

3

当您使用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/

于 2013-10-11T19:46:26.220 回答
0

这是同样的问题：我不想从 CSS 中的父级继承子级不透明度

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

于 2013-10-11T19:47:27.290 回答