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>

CSSだけでこれを解決するよりエレガントな方法はありますか?

4

2 に答える 2

3

を使用するopacityと、その要素内のすべてが影響を受け、回避策はありません。

これには 2 つの方法があります。

外側の進行

進行状況をオーバーレイの外側に置き、それを使ってオーバーレイの中央に配置します。

.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;
}

2 つ目の jsFiddle は次のとおりです: http://jsfiddle.net/Qpv4E/2/

于 2013-10-11T19:46:26.220 に答える
0

ここに同じ質問があります: CSS で親から子の不透明度を継承したくありません

RaphaelDDL の回答が役立つことを願っています。

于 2013-10-11T19:47:27.290 に答える