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

here is my problem

Answer 1

.coverer p { 
    background: #fff; 
} 

你能不能做到這一點？

Answer 2

有幾種方法可以實現這一點。每個瀏覽器都有效，例如，IE和其他瀏覽器可能對不透明命令反應良好。

從

除此之外，這是不符合邏輯的，可以你一些搜索引擎懲罰的標誌 - 當然這取決於量你這樣做等

演示[link]

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

你甚至可以添加不透明度命令，但是這仍然會看到下面的文本以及z-index，並且還顯示：隱藏和可見性使用...

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