Wie behalte ich die Deckkraft untergeordneter Elemente bei, wenn ich die Deckkraft von Containern in HTML/CSS festlege?

Aufrechterhaltung der Deckkraft untergeordneter Elemente in HTML/CSS

Ihr Ziel ist es, ein Popup-Fenster zu erstellen, das oben auf der Seite angezeigt wird und dessen Hintergrundinhalt ausgeblendet ist, um ihn hervorzuheben . Sie sind jedoch auf ein Problem gestoßen, bei dem das Festlegen der Deckkraft des Containers auf 0,3 dazu führt, dass beide Divs durchscheinend werden.

Lösung: Hintergrundfarbe mit Deckkraft verwenden

Um den gewünschten Effekt zu erzielen, verwenden Sie Deckkraft in Verbindung mit Hintergrundfarbe. Betrachten Sie den folgenden Code:

<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>

In diesem Code wird ein etwas anderer Ansatz verfolgt:

• Das #container-Element ist so eingestellt, dass es einen goldenen Rand und einen halbtransparenten Rand hat Hintergrund mit einer angegebenen Deckkraft.
• Das #box-Element, das die Popup-Box darstellt, erhält einen silbernen Rand und einen halbtransparenten Hintergrund mit einer anderen angegebenen Deckkraft.

Von Durch die Verwendung einer Hintergrundfarbe mit Deckkraft können Sie die Transparenz des Containers steuern und gleichzeitig die Deckkraft des untergeordneten Elements beibehalten. Dadurch hebt sich das Popup-Fenster vom verblassten Hintergrund ab.

Das obige ist der detaillierte Inhalt vonWie behalte ich die Deckkraft untergeordneter Elemente bei, wenn ich die Deckkraft von Containern in HTML/CSS festlege?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!