Opazität mit einem Overlay div

Question

ich derzeit an einem arbeite "Overlay Pop-up", das erscheint, wenn ich eine bestimmte Schaltfläche klicken.

Es funktioniert ganz gut, aber kämpfe ich mit dem opacity

Mein Haupt Overlay div über die gesamte Website erscheint und ich gab es eine opacity, so dass Sie leicht die Seite im background sehen können.

Über das Overlay habe ich einen Inhalt div, der den tatsächlichen Inhalt zeigt (in diesem Fall eine Passwortänderung Anfrage).

Wie auch immer, ich möchte nicht, dass die Inhaltsbox transparent ist, aber egal was ich versuche (z-index:10, opacity:1, position:relative usw.), es funktioniert nicht.

Es ist immer noch transparent, weil ich die opacity in der Overlay div. Hier

ist der Code:

CSS:

.changePasswordOverlay 
{ 
    height: 0%; 
    width: 100%; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color:#fafafa; 
    opacity: 0.9; 
    overflow-y: hidden; 
    transition: 1s; 
} 

.passwordOverlayContent { 
    margin-left:40%; 
    margin-top:15%; 
    font-family:'source_sans_proregular'; 
    font-size:15px; 
    position:relative; 
} 

HTML:

<div class="changePasswordOverlay"> 
     <div class='passwordOverlayContent'> 
     . 
     . 
     . 
     </div> 
    </div> 

Answer 1

Sie brauchen rgba in background statt opacity zu verwenden, da opacity Vererbung hat Eigenschaften, also Kinder werden erhalten opacity sowie

Beachten Sie, dass rgba für Rot/Grün/Blau/Alpha steht. und das ist der Alpha-Wert, der als "Opazitätswert" wirkt. Je größer der Alpha-Wert, desto undurchsichtiger wird sein.

.changePasswordOverlay { 
 
    height: 100%; /* changed for demo */ 
 
    width: 100%; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: rgba(0, 0, 0, .5); 
 
    overflow-y: hidden; 
 
    transition: 1s; 
 
} 
 
.passwordOverlayContent { 
 
    margin-left: 40%; 
 
    margin-top: 15%; 
 
    font-family: 'source_sans_proregular'; 
 
    font-size: 15px; 
 
    position: relative; 
 
    color:white /* demo */ 
 
}

<div class="changePasswordOverlay"> 
 
    <div class='passwordOverlayContent'> 
 
    text 
 
    </div> 
 
</div>

Answer 2

Bewegung der passwordOverlayContent Behälter nach changePasswordOverlay (anstelle von innen), und die CSS position:fixed ändern, damit es "Opazität unabhängige"

Answer 3

Opazität die div angewendet und seine children so .passwordOverlayContent wird auch die gleiche haben opacity, verwenden background rgba anstelle von opacity

background-color: rgba(0, 0, 0, .9); 

geänderte Klasse:

.changePasswordOverlay 
{ 
    height: 0%; 
    width: 100%; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: rgba(0, 0, 0, .9); 
    overflow-y: hidden; 
    transition: 1s; 
}