0

ポップアップ オーバーレイを作成しようとしていますが、青いオーバーレイを不透明にすることができません。赤が透けます。

<a href="www.google.com">hi</a>
<div class="dim">
    <div class="test">
        <div> test </div>
        <div> 2nd </div>        
    </div>
</div>​

.dim {
    height:100%;
    width:100%;
    position:fixed;
    left:0;
    top:0;
    background-color:red;
    opacity: 0.5;
}

.test {
    opacity: 1.0;
    border: solid;
    display: inline-block;
    background-color:blue;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
}

JSfiddle リンク

4

2 に答える 2

1

あなたのhtmlを次のように書いてください-

<a href="www.google.com">hi</a>
<div class="dim">   
</div>
<div class="test">
    <div> test </div>
    <div> 2nd </div>        
</div>

更新されたフィドル

于 2012-11-06T07:06:20.130 に答える
1

簡単な修正は、.dim を .test の外に置いて、コピー アンド ペーストを行うことです。

http://jsfiddle.net/NVa65/10/

から

<a href="www.google.com">hi</a>
<div class="dim">
    <div class="test">
        <div> test </div>
        <div> 2nd </div>        
    </div>
</div>​

に

<a href="www.google.com">hi</a>
<div class="dim">

</div>
<div class="test">
    <div> test </div>
    <div> 2nd </div>        
</div>
​
于 2012-11-06T07:06:49.143 に答える