web-dev-qa-db-ja.com

不透明度のあるdiv内のdivに不透明度がありません

タスクにはasp.netajaxツールキットを使用する必要があります。私が行っているのは、更新の進行状況コントロールがトリガーされたときに画面全体にdivを表示することです。メインのdiv（画面全体をカバーする）には不透明度がありますが、このdiv内にdivを配置しようとすると、何も設定していなくても不透明度が高くなります。

HTMLの例：

<ProgressTemplate>
            <div class="updateProgressBox">
                <div class="updateProgressMessage">
                    <p>Processing request..</p>
                </div>
            </div>
</ProgressTemplate>

そしてCSS：

.updateProgressBox {
    top: 0px; 
    height: 100%; 
    background-color:Gray;
    opacity:0.7; 
    filter:alpha(opacity=70);
    vertical-align: middle; 
    left: 0px; 
    z-index: 999999; 
    width: 100%; 
    position: absolute;
    text-align: center;   
}

.updateProgressMessage {
    border: black 2px solid;
    background-color: #fff;
    z-index: 1000000;   
    padding: 20px;
    opacity:1.0; 
    filter:alpha(opacity=100);
    margin: 300px auto auto auto;
    font-weight: bold; 
    vertical-align: middle;
    width: 200px; 
    text-align: center
}

メッセージ付きのdivに透明度がなく、背景色が白になるようにするにはどうすればよいですか？

asp.nethtmlcssopacity
15
Nick

この問題を解決するには、親div background: rgba(64, 64, 64, 0.5)でRGBAバックグラウンドプロパティを使用します。 64、64、64はRGBカラー値です。 0.5は不透明度の値です。これで、親は子に継承されない独自の不透明度値を持つことができます。これは、FireFox、Opera、Chrome、Safari、IE9で完全にサポートされています。

http://jsfiddle.net/Rp5BN/ で作業例を確認してください

IE 5.5から8をサポートするには、ベンダー固有のCSS 'グラデーションフィルターを使用する必要があります：'したがって、これを追加する必要があります。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

ここで、7fは127を表します。つまり、不透明度は50％で、色は404040です。

IE http://jsfiddle.net/Rp5BN/2/ の実例を確認してください

37
Hussein

opacityは継承され、リセットできません。

あなたはできる...

  • アルファ透明の24ビットPNGの背景画像を使用します。
  • 他の要素notを子にします。
  • フセインの提案rgba()を使用します。
10
alex

これを実現するには、不透明度によって親要素自体内のすべての子ノードのアルファチャネルが変更されるため、背景自体にRGBAカラーを使用する必要があります。例えば。

.div {
    background-color: rgba(255,0,0, .5);
}
2
user4533280