0

これが私の試みです：JSFIDDLE

いくつかの既存のスタイルを上書きしているので、背後に半透明のマスクを追加する必要がありますbox 

.box {
position:fixed;
background:red;
height:50%;
width:200px;
top:0;
left:0;
bottom:0;
right:0;
z-index:1000;
margin:auto;
}

.box:after {
content:"";
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(255,255,255,0.8);
z-index:999;
}

:afterフィドルのサンプルを参照してください。ボックスもそのスタイルでカバーされている理由がわかりませんか?

ご清聴ありがとうございました！

4

2 に答える 2

3

:after疑似要素は、の実際のコンテンツの後にある疑似コンテンツを定義するためです。の疑似子です。したがって、疑似要素が実際にDOMで定義される場合、次のようになります.box.box

<div class="box">
    <p>some real content</p>
    <div class="box-after"></div>
</div>

このようではありません：

<div class="box">
    <p>some real content</p>
</div>
<div class="box-after"></div>

EDIT :問題を解決するには、すべての内部コンテンツを別の div
でラップするだけです。.box

<div class="box">
    <div class="inner-box">inner content</div>
</div>

次に、CSS に若干の変更を加えると、次のようになります: http://jsfiddle.net/GA7GC/2/。

于 2013-10-15T08:04:49.890 に答える