Wie erstelle ich Overlays mit transparentem Hintergrund in HTML/CSS?

Overlays mit transparenten Hintergründen in HTML/CSS erstellen

Ihr Ziel ist es, einen Overlay-Effekt zu erstellen, bei dem ein Popup-Feld über dem Hintergrund erscheint Inhalt, der sein Erscheinungsbild verdunkelt. Das Anwenden von Deckkraft auf den Container wirkt sich jedoch auch auf das Popup-Fenster aus.

Lösung

Um den gewünschten Effekt zu erzielen, verwenden Sie Deckkraft in Verbindung mit der Hintergrundfarbe. Im CSS für den Container:

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

• background-color legt die transparente Farbe für den Container fest.
• rgba() nimmt das Format rgba(r, g, b, a), wobei r, g, b Rot-, Grün- und Blauwerte sind und a die Deckkraft ist (0 bedeutet völlig transparent).

Nun zum Popup-Fenster:

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

Mit diesem Ansatz können Sie den Hintergrund dimmen und gleichzeitig die Sichtbarkeit des Popup-Felds beibehalten, wodurch der gewünschte Overlay-Effekt entsteht.

Das obige ist der detaillierte Inhalt vonWie erstelle ich Overlays mit transparentem Hintergrund in HTML/CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!