css - css可见溢出内容如何具有非透明背景，因此隐藏下面的内容？

Question

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;
}

这是我的问题

Answer 1

有几种方法可以实现这一点。每个对浏览器都有影响，例如，IE 和其他浏览器可能无法很好地响应 opacity 命令。

除此之外，这不合逻辑，一些搜索引擎会惩罚你——当然取决于你做的数量等。

演示[链接]

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

您甚至可以添加不透明度命令，但这仍然会在下面看到您的文本以及 z-index 以及显示：隐藏和可见性使用...

Answer 2

.coverer p {
    background: #fff;
}

你不能这样做吗？

Answer 3

使用 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;
}