Wie erstelle ich mithilfe von HTML/CSS einen verblassenden Hintergrund, ohne die Sichtbarkeit untergeordneter Elemente zu beeinträchtigen?

Deckkraftmanipulation ohne Auswirkungen auf untergeordnete Elemente mithilfe von HTML/CSS

Problem:

Implementierung eines Fading-Effekts für den Hintergrund während Ein untergeordnetes Element sichtbar zu halten, kann allein mit der Deckkraft eine Herausforderung sein. Dies tritt auf, wenn versucht wird, ein Popup-Fenster zu erstellen, das sich selbst hervorhebt, indem der darunter liegende Inhalt abgedunkelt wird.

Lösung:

Um den gewünschten Effekt zu erzielen, kombinieren Sie Deckkraft mit Hintergrundfarbe wie folgt:

<code class="css">#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}</code>

Indem Sie die Hintergrundeigenschaft mit einem RGBA-Wert festlegen, geben Sie die Deckkraft des Containers an, der den Inhalt hinter der Popup-Box darstellt, während die Sichtbarkeit des #box-Elements erhalten bleibt. Die RGB-Werte stellen die Farbe dar, während der a-Wert den Transparenzgrad angibt.

Um diesen Ansatz anzuwenden, implementieren Sie den bereitgestellten CSS-Code und fügen Sie den folgenden HTML-Code ein:

<code class="html"><div id="container">
    container text
    <div id="box">
        box text
    </div>
</div></code>

Das obige ist der detaillierte Inhalt vonWie erstelle ich mithilfe von HTML/CSS einen verblassenden Hintergrund, ohne die Sichtbarkeit untergeordneter Elemente zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!