Heim > Artikel > Web-Frontend > 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>
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!