Wie wende ich Opazität auf einen Container an, ohne die untergeordneten Elemente zu beeinflussen?

Deckkraft auf ein Element anwenden, ohne die untergeordneten Elemente zu beeinflussen

Um die Benutzererfahrung zu verbessern, ist es wünschenswert, Effekte wie Popups oder Überlagerungen zu erstellen Verdunkeln Sie den zugrunde liegenden Inhalt. Das Anwenden von Deckkraft auf ein Containerelement kann sich jedoch unbeabsichtigt auf untergeordnete Elemente auswirken. Mit dieser Frage wird nach einer Lösung gesucht, um Deckkraft auf ein Containerelement anzuwenden, ohne die Sichtbarkeit untergeordneter Elemente zu beeinträchtigen.

Der bereitgestellte HTML- und CSS-Code verdeutlicht das Problem: Das Anwenden von Deckkraft auf das Containerelement (#container) führt zu beiden Container und das untergeordnete Element (#box) mit reduzierter Deckkraft. Um dieses Problem zu lösen, können wir eine Technik mit Hintergrundfarbe anwenden.

<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 dieser Lösung kombinieren wir Deckkraft mit Hintergrundfarbe. Die Hintergrundeigenschaft sowohl für den Container als auch für die untergeordneten Elemente wird mit rgba() definiert, wobei der letzte Parameter die Deckkraft darstellt. Indem wir die Deckkraftwerte auf einen niedrigen Wert festlegen, können wir einen halbtransparenten Effekt für den Container erzeugen und gleichzeitig die volle Sichtbarkeit des untergeordneten Elements beibehalten.

Mit dieser Technik können wir den gewünschten Effekt des teilweisen Ausblendens des Containers erzielen Container ohne Auswirkungen auf das untergeordnete Element. Es kann zum Erstellen verschiedener Elemente der Benutzeroberfläche verwendet werden, einschließlich Popups, Modalitäten und Overlays.

Das obige ist der detaillierte Inhalt vonWie wende ich Opazität auf einen Container an, ohne die untergeordneten Elemente zu beeinflussen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!