如何避免在div中使用div來降低不透明度？

Question

如果我把東西放在不透明度：1; in div與不透明度：0.5;，與不透明度：1;獲得0.5的不透明度，但我不想那樣做，但我需要外部div爲0.5，因爲這是背景。我該如何解決？

Answer 1

而不是做這個的，

<div id="divA" style="opacity:0.5"> 
    divA 
    <div id="divB" style="opacity:1"> 
    divB 
    </div> 
</div> 

我總是做以下的選擇：

<div id="superparentdiv" style="position:relative"> 
    <div id="divA" style="opacity:0.5"> 
    divA 
    </div> 
    <div id="divB" style="opacity:1"> 
    divB 
    </div> 
</div> 

，如果位置事項，我申請position:absolute;設置的divB

位置

希望這有助於。

Answer 2

雖然可以使用技巧，但你試圖做的事是不可能的。孩子的不透明度是相對於父母的。因此，對孩子的「1」不透明度將僅等於其父母的完全不透明度（0.5）。

如果父項（不透明度0.5）只是一種顏色，則可以使用rgba而不是不透明度。否則，您需要從其父項中移除子項並使用定位將子項置於背景之上。

Answer 3

你在1米不透明的東西嘗試添加的z-index：9999（只是一個大） 所以哎將在0.5格

Answer 4

這將取決於你的用例的頂部，但你可以使用background-color與透明度：

background-color: #8888FF; /* fallback for browsers with no alpha-transparency support */ 
background-color: rgba(0,0,255, 0.5); 

Read more here。