web-dev-qa-db-ja.com

透明な親要素の上に不透明なdivを作成する

編集：実際に正しいタイトルに変更しました

私はすべてのHTMLとCSSでモーダルポップアップをシミュレートしようとしていますが、私がしていることの1つの要素で少し不運を感じています。一番内側のdiv（コンテンツを含むdiv）が境界線のように不透明にならないようにしたいのですが、CSSで何を試みても機能しません。これがコードです：

CSS

.modalBackground {
    background-color:Gray;
    filter:alpha(opacity=70);
    opacity:0.7;
}

HTML

  <table style="height: 100%; width: 100%; position: fixed; top: 0; left: 0;"><tr><td class="modalBackground">
    <div style="display: table; height: 40px; width: 150px; position: fixed; overflow: hidden; 
        top: 40%; margin-top: -50px; left: 50%; margin-left: -75px; padding-left: 30px;
        border: solid 1px navy; background-color: White;">
        <div style="#position: absolute; #top: 50%; display: table-cell; vertical-align: middle;">
            <div style="#position: relative; #top: -50%;"
                ><asp:Image runat="server" ImageUrl= "~/images/indicators/indicatordark.gif" /> working...</div>
        </div>
    </div></td></tr></table>

私はこれで私のウィットの終わりに近づいています。私は決してHTMLやCSSの第一人者ではないので、ソリューションが機能する理由の説明をいただければ幸いです。

htmlcssopacity
17
Payton Byrd

更新された回答

これを行う最善の方法は、rGBAカラーを使用することです。古いブラウザでは機能しませんが、単色を供給するだけで、デザインを優雅に劣化させることができます。例：

CSS

.parent {
    background: gray; /* older browsers */
    background: rgba(128,128,128,0.7); /* newer browsers */
}

.child {
    background: blue;
}

元の回答

それは迷惑ですが、CSSはそれを許可していません。 1つの要素に不透明度を設定するということは、子要素がそれ以上の不透明度を持つことはできないということです。 （25％の不透明度の100％は正しいですか？）

したがって、1つの解決策は、小さな透明なPNGを繰り返しの背景画像として使用して、それを回避することです。唯一の問題はIE6で、 supersleightと呼ばれる優れた回避策 があります。

（更新。supersleightがうまくいくと思います。）

Updateこれは非常に単純なテストケースです。画像（たとえば、50％黒の塗りつぶしを含むPNG）を作成してから、このファイルを作成します-同じフォルダーに保存します。 「もの」の後ろに透明な背景の薄いボックスが表示されない場合は、ファイルを正しく保存していないか、別の場所に画像を保存しています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
body { background:white; }
#overlay { background-image:url(test.png); }
</style>
</head>
<body>
<div id="overlay">stuff</div>
</body>
</html>
23
user241244

透明な画像を使用せずにこれを行うこともできます。 2つの個別のdivを作成し、z-indexを使用してどちらを上にするかを制御します

jsfiddleのサンプルコード

14
smarty

可視性を使用するのはどうですか？

#parentDiv {
  visibility: hidden;
}

#childDiv {
  visibility: visible;
}
2
Zozos

この場合、子要素は不透明度を継承せず、透明にならないため、rgba-colorで不透明度を使用して親divの色を設定することは、ここではより意味があります。

したがって、background-color：グレーや＃何かを使用する代わりに、次のようなものを使用します。

.modalBackground {
  background-color: rgba(222, 222, 222, 0.7);
}

このように、親要素の不透明度は0.7ですが、divや画像など、このdiv内の不透明度は継承されません。

ネット上には多くのrgbaジェネレーターがあります。試してみてください。

http://www.css3-generator.de/rgba.html

1
Pingbeat

PNGはより良い互換性を提供します（フィルターを使用する必要があります：IE6のステートメント）より優れたCSS3メソッドはRGBAカラーを使用（eg background：rgba（0,0,0,0.5）;は50％のアルファで黒くします）継承された不透明度を取り除きます =。

1
Nadav Daniel

これを試して

<div  class="" id="" style=" background: none repeat-x scroll 4px 3px lightgoldenrodyellow; left: 450px;  width:470px; text-align:center; height: 45px; position: fixed; 
  opacity:0.90;
    filter:alpha(opacity=40);
    z-index: 1000; ">
</div>
0
PPB

透明なdivを不透明なdivの後ろに配置する方法は、次のようなものを使用することでした。

`div.transparent-behind { opacity: 0.4; 
                      z-index: -1; }

 div.opaque-ontop { position: absolute; 
                top: (wherever you need it to fit)px;
                left: (some # of)px}'

ここで、divは互いにネストされていませんが、html内で次々にネストされています

理にかなっていますか？

0
Ryan Greever