Div樣式繼承問題

Question

我想嵌入一個DIV在另一個DTE中，而不繼承包裝DIV的不透明度樣式。

樣式代碼：

#outer { 
background-color: #000; 
width: 400px; 
height: 400px; 
z-index: 0; 
opacity: 1; 
} 

#inner { 
background-color: #000; 
width: 200px; 
height: 200px; 
z-index: 1; 
opacity: 0.5; 
} 

HTML代碼：

<div id="outer"> 
    <div id="inner"> 
    </div> 
</div> 

我已經嘗試了一些不同的解決方案，但都沒有工作至今。

Answer 1

您可以使用CSS3s rgba屬性來解決該問題（適用於顏色）。

background-color: rgba(0, 0, 0, .7); 

如果你想支持不支持CSS3或rgba財產舊的瀏覽器（或當你有背景圖片），這裏是鏈接到其他可能的解決方案：

• Non-Transparent Elements Inside Transparent Elements
• CSS Background Transparency Without Affecting Child Elements, Through RGBa And Filters

其他跨瀏覽器解決方案是使用半透明PNGs爲您的divs。

Answer 2

這是不可能的。不透明度將應用於所有內容。 See the spec for more information。

Answer 3

你沒辦法做那個人。

兩種解決方案，如果它只是背景顏色，你可以：

1. 使用透明的PNG圖片

2. 使用RGBA。例如，對於具有60％透明度的黑色：background-color: rgba(0, 0, 0, .6);