25

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

私はすべての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の第一人者ではないので、ソリューションが機能する理由を説明していただければ幸いです。

4

7 に答える 7

31

更新された回答

これを行う最善の方法は、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 と呼ばれる優れた回避策があります。

（更新。スーパースライトがうまくいくと思います。）

更新 これは非常に単純なテスト ケースです。画像 (たとえば、50% の黒塗りの PNG) を作成し、このファイルを作成して、同じフォルダーに保存します。「stuff」の背後に透明な背景の薄いボックスが表示されない場合は、ファイルが正しく保存されていないか、画像が別の場所に保存されています。

<!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>
于 2010-03-01T15:18:54.997 に答える
15

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

jsfiddle のコード例

于 2012-07-21T14:40:51.560 に答える
2

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

background-color: gray や #something を使用する代わりに、次のようなものを使用します。

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

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

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

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

于 2016-08-02T08:37:22.140 に答える
0

これを試して

<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>
于 2013-03-20T11:35:33.200 に答える