洪水另一格內一個div，並設置不透明度

Question

說我有一個HTML對象樹如下：

<div> 
    <p>Text 1</p> 
    <p>Text 2</p> 
    <div></div> 
</div> 

我想的CSS洪水外一個內側的內格。不過，我希望文字等完好無損。我的想法是我可以爲內部div設置一個bg顏色和不透明度，而不會影響文本。我該怎麼做呢？

編輯：只是爲了強調我的觀點： 我可以很好地設置外部div的不透明度，但裏面的文字也會消失。我不希望發生這種情況

Answer 1

你可以設置外部div的位置：相對內部div到：

 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 

並設置任何你想要的。它現在應該涵蓋第一個div內的所有內容。如果你想要的文字到它只是設置在頂部出現：

 
div p { 
    position: relative; 
    z-index: 1; 
} 

div div { 
    z-index: 0; 
} 

Answer 2

你的意思是這樣的？

div>div { 
    background-color: red; 
    opacity: 0.5; 
} 

它使用了子選擇器，所以只選擇直接在另一個div內的div。由於div幾乎是最常見的HTML元素，所以我建議至少爲其中一個類指定一個類名。

<div class="innerDiv"></div> 

然後，您可以在您的CSS樣式表.innerDiv {}樣式。

Answer 3

你不會能夠這樣，你需要做的是以下幾點：

<div class="maindiv"> 
    <p>Text 1</p> 
    <p>Text 2</p> 
</div> 

<div class="floatingbkg"></div> 

和應用不透明度爲floatingbkg，然後放置在一起，背後maindiv floatingdiv。

我確實創建了一個jqueryplugin，但是我沒有完成它，它模擬了iphone上的彈出窗口。

您將需要使用相對定位或使div彼此過度。 「洪水」但要做到這一點，你可以使用CSS規則hyerarchy：

Answer 4

您的意思是，我不清楚

div {} 

影響所有div

div div{} 

影響所有div裏面其他divs

Answer 5

使用的RGBA - 見CSS-Tricks的例子。這會改變背景的不透明度，但不會改變文字的透明度。