Jak anulować krycie elementu potomnego?

Question

Chcę zastosować krycie dla elementu nadrzędnego, ale nie chcę, aby element podrzędny dziedziczył tę nieprzezroczystość.

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

.parent { 
    opacity: 0.6; 
} 

Czy istnieje sposób na "anulowanie" odziedziczonego nieprzezroczystości? może wymusić na nim element opacity=1?

Answer 1

Zadymienie dziecka zawsze będzie krycie rodzica jeśli krycie dziecka to 1.

To nie jest problem z dziedziczenia, ale raczej ze sposobu krycie jest obliczana.

Na przykład

<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 „s krycie ze swojego punktu widzenia, jest taki sam jak #parent div, ale w rzeczywistości #parent div ma dwukrotnie większą przezroczystość #quarter. Zobacz ten jsfiddle więcej szczegółów: http://jsfiddle.net/HUaNm/

---

Jedynym sposobem na uniknięcie tego jest przeniesienie dziecka z rodzicem. Alternatywnie, w zależności od tego, co chcesz tutaj, możesz również użyć kolorów rgba dla tła/obramowania/koloru czcionki rodzica zamiast krycia, ale efekt nie jest taki sam jak stosowanie krycia.