如何取消子元素的不透明度？

Question

我想爲父項應用不透明度，但我不希望子元素繼承此不透明度。

<div class="parent"> 
<div class="child"></div> 
</div> 

.parent { 
    opacity: 0.6; 
} 

有沒有辦法「取消」繼承的不透明度？也許強制它爲opacity=1爲子元素？

Answer 1

孩子的不透明度永遠是父母的不透明度，如果孩子的不透明度爲1

這不是一個繼承的問題，而是與透明度的方式進行計算。

例如，

<div id="parent"> 
    <div></div> 
</div> 

<div id="original"> 
</div> 

<div id="quarter"> 
</div> 

#parent div, #quarter { 
    width: 100px; 
    height: 100px; 
    background-color: orange; 
} 

#parent div { 
    opacity: 0.5; 
} 

#parent { 
    opacity: 0.5; 
} 

#quarter { 
    opacity: 0.25; 
} 

#quarter的不透明度，從你的角度來看，是相同的#parent div，但事實上，#parent div有#quarter不透明的兩倍。看到這個的jsfiddle更多細節：http://jsfiddle.net/HUaNm/

---

避免這個問題的唯一辦法是將孩子從父母的。或者，根據您在此處所需的內容，還可以使用rgba顏色作爲父級的背景/邊框/字體顏色而不是不透明度，但效果與應用不透明度不同。