1

css で表示されるオーバーフロー コンテンツの背景を非透明にして、その下のコンテンツを非表示にするにはどうすればよいですか?

<div class="coverer-container">
    <div class="coverer">
        <p>I want this to have an opaque background.</p>
    </div>
</div>
<div class="coveree">
    <p>So you can not see this text.</p>
</div>

.coverer-container{
    position:relative;
    height:0;
    width:0;
    overflow:visible;
}

.coverer{
    position:absolute;
    height:300px;
    width:300px;
}

ここに私の問題があります

4

3 に答える 3

1

これを実現する方法はいくつかあります。それぞれがブラウザに影響を及ぼします。たとえば、IEや他のブラウザは不透明度コマンドにうまく応答しない場合があります。

それを除けば、それは論理的ではなく、いくつかの検索エンジンはあなたにペナルティフラッグをかけることができます-もちろんあなたがそれをする量などに応じて。

デモ[リンク] 

.coverer{
position:absolute;
height:300px;
width:300px;
display:block;
background:#fff;
}
.coveree{}

不透明度コマンドを追加することもできますが、これでも下のテキストとz-indexが表示され、表示：非表示と可視性の使用法...

于 2013-03-04T09:31:25.303 に答える
0 
.coverer p {
    background: #fff;
}

あなたはこれを行うことはできませんか？

于 2013-03-04T09:30:42.937 に答える
0

z-index を使用: http://jsfiddle.net/HZL8c/

HTML

<div class="coverer">
    <p>I want this to have an opaque background.</p>
</div>
<div class="coveree">
    <p>So you can not see this text.</p>
</div>

CSS

.coverer{
    border: 1px solid green;
    position:absolute;
    height:300px;
    width:300px;
    z-index: 2;
    background: #fff;
}

.coveree{
    border: 1px solid red;
    position: relative;
    z-index: 1;
}
于 2013-03-04T10:08:04.457 に答える