如何使用jquery防止子div的不透明

Question

我爲主div添加了不透明度爲opacity:0.5我也有子div包含消息。 HTML：

<div id="word_wrap"> 
    <div id="top_div"> 
     Hi Folks Nice to Meet you 
      </div> 
</div> 
<input id="floating_button" type="button" value="Click Me"/> 

這裏是小提琴：

http://jsfiddle.net/JVQTh/ 現在不透明出現充分體現了對DIV包括子格。但我想顯示沒有不透明度，具有背景不透明度的子div。是否有可能在jQuery或CSS中做到這一點。

在上面的小提琴中，我將sub div背景設置爲紅色。我想顯示沒有不透明度的子div。如何排除子div本身或相應的div本身的不透明度。

謝謝。

Answer 1

當您在元素上設置不透明度時，該元素的所有子元素的不透明度都爲1，但由於它們在父元素內，因此父元素上的不透明度也會影響子元素，所以您無法將孩子的不透明度設置爲比父級「更明顯」，因爲孩子的不透明度已經是1.

最接近的是rgba顏色，它在所有瀏覽器中都不受支持：

background-color: rgba(255, 0, 0, 0.5); 

FIDDLE

這將背景顏色設置爲紅色，其alpha（不透明度）爲0.5，而不在整個元素上設置不透明度，或者設置爲子項。