Bild zeigt noch durchscheinend Opazität nach Änderung der Durchlässigkeitswert

Question

Funktionalität:

Die folgende Seite ist durchscheinend und hat eine opacity: 0.68; und innerhalb der Seite, ich habe ein Bild mit einem opacity: 1.0;. Die Hauptidee ist, dass das Bild in einer Überlagerung über dem transluzenten Hintergrund platziert wird, und das Bild sollte nicht die gleiche transluzente Eigenschaft wie der Hintergrund haben.

Ausgabe:

Das Bild innerhalb der transluzenten Seite wird die gleiche durchscheinend Eigenschaft teilen, obwohl ich die Opazität Eigenschaft des Bildes festgelegt habe 1,0.

Wie kann ich das Bild so einstellen, dass es einen festen Zustand hat, ohne die Opazitätseigenschaft anzuzeigen, die ich vom Haupthintergrund eingestellt habe?

.BrandMenu { 
 
    background-color: #D3D3D3; 
 
    filter: alpha(opacity=98); 
 
    opacity: 0.98; 
 
} 
 
.BrandDescription { 
 
    background-color: #FFFFFF; 
 
    filter: alpha(opacity=200); 
 
    opacity: 1.0; 
 
}

<div id="Park_BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=9; top:0px; margin:auto;"> 
 

 
    <img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:650px; top:500px; background-color: white; left:0px; z-index=99;"> 
 
</div>

Answer 1

Der Grund liegt in der Antwort von @eisbehr erklärt, aber Sie können einen translucid Hintergrund mit rgba() Werte haben, ohne die Opazität der Kinder Elemente zu beeinflussen:

.BrandMenu { 
 
    background-color: rgba(211, 211, 211, 0.98); 
 
} 
 
.BrandDescription { 
 
    background-color: #FFFFFF; 
 
}

<div id="Park_BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: block; top:0px; margin:auto;"> 
 

 
    <img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:650px; top:500px; background-color: white; left:0px;" src="http://lorempixel.com/400/200"> 
 
</div>

Und es gibt keinen 2.0 Wert der Opazität, beträgt die maximale 1.0 (100%)

Answer 2

Sie kein Element vollständig sichtbar mit opacity machen kann, wenn die übergeordneten Elemente nicht vollständig sichtbar sind. Die opacity wird von den Eltern berechnet, und 1.0 ist das Maximum. Bebilderung einer Einrichtung wie dieser:

<div style="opacity: .5;"> 
    This text here has a opacity of 50%! 
    <div style="opacity: .5;"> 
    This text here has a opacity of 25%! 
    <div style="opacity: .5;"> 
     This text here has a opacity of 12.5%! 
     <div style="opacity: 1;"> 
     This text here has still a opacity of 12.5%! 
     </div> 
    </div> 
    </div> 
</div>