Wie erreicht man selektive Opazität in einem Container, ohne die untergeordneten Elemente zu beeinträchtigen?

Erzielen selektiver Deckkraft in HTML/CSS

Beim Erstellen visueller Elemente auf einer Webseite ist die Kontrolle der Deckkraft von entscheidender Bedeutung. Es kann jedoch eine Herausforderung sein, Deckkraft zu erreichen, ohne die untergeordneten Elemente zu beeinträchtigen. Bei dieser Frage geht es um eine Technik, um einem Container Deckkraft zu verleihen, ohne die Sichtbarkeit seines Inhalts zu beeinträchtigen.

Der gewünschte Effekt ist ein Popup-Feld, das über dem Inhalt der Webseite positioniert wird, wobei der Hintergrundinhalt durch Reduzierung seiner Deckkraft teilweise sichtbar ist. Der Fragesteller hat versucht, Deckkraft für den Container zu verwenden, aber die Deckkraft wirkte sich auch auf das untergeordnete Element aus, was dazu führte, dass beide eine verringerte Deckkraft hatten.

Um dieses Problem zu lösen, können Sie eine Kombination aus Deckkraft und Hintergrundfarbe verwenden. Indem Sie die Hintergrundfarbe des Containers auf einen RGBA-Wert mit einer Opazitätskomponente (z. B. RGBA(56,255,255,0.1)) festlegen, können Sie seine Deckkraft reduzieren und gleichzeitig die Sichtbarkeit des untergeordneten Elements beibehalten. Dadurch können Sie den beabsichtigten Effekt einer Popup-Box mit teilweise undurchsichtigem Hintergrund erzeugen.

<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);
}

<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>
</code>

Das obige ist der detaillierte Inhalt vonWie erreicht man selektive Opazität in einem Container, ohne die untergeordneten Elemente zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!