如何將不透明度應用於未影響其中其他元素的div？

Question

Wen我將不透明度應用於div，該div內的所有其他元素獲得與父div相同的不透明度，其中我希望孩子不要有任何不透明度。我將不勝感激。

Answer 1

簡單的答案：這是不可能的。你需要重構你的標記。

編輯 - 你想要一個解釋，你明白了。

的CSS specs狀態

< alphavalue>

在語法上一個<號>。穿過整個對象的統一不透明度設置將應用於。任何超出範圍0.0（完全透明）到1.0（完全不透明）的值將被限制在此範圍內。如果對象是一個容器元素，那麼效果就好像容器元素的內容與當前背景混合使用掩碼，其中掩碼的每個像素的值爲< alphavalue>。 。

這意味着，容器不透明度適用於其內容。

使用的變通辦法顏色rgba不會影響圖像，表單元素，滾動條等

因此，我建議標記的這樣的調整：

<div style="position: relative"> 
    <div style="position: absolute; top: 0; left: 0; opacity: .5"> 
     <!-- semi-transparent content here --> 
    </div> 
    <div style="position: absolute; top: 0; left: 0;"> 
     <!-- fully opaque content here --> 
    </div> 
</div> 

Answer 2

你只能控制使用rgba()顏色表示法，您父母div的某些單個組件的Alpha。即使這樣，對於rgba()瀏覽器支持比opacity支持稍差，你不能使用廠商擴展它：

#parent { 
    color: rgba(255, 255, 255, 0.5); 
    background-color: rgba(153, 0, 0, 0.5); 
} 

如果需要瀏覽器的支持，使用的顏色，而不是透明的PNG圖片：

#parent { 
    color: rgba(255, 255, 255, 0.5); 
    background-image: url(bg.png); 
} 

不要設置opacity屬性;否則你父母div中的所有內容的opacity將相對於此opacity，並且指定父母opacity: 0.5和子女opacity: 2.0也不起作用。