Wie kann man mit CSS ein Overlay mit einem Loch erstellen?

Löcher in Overlays mit CSS erstellen

Frage:

Wie kann man ein Overlay erstellen? mit einem Loch, das die Sichtbarkeit der zugrunde liegenden Website ermöglicht Inhalt?

Antwort:

Das Erstellen von Löchern in Overlays nur mit CSS ist tatsächlich möglich. So können Sie dies erreichen:

Verwenden von CSS Box-Shadow:

1. Definieren Sie eine neue CSS-Klasse, z. B. .hole.
2. Legen Sie die Box-Shadow-Eigenschaft für diese Klasse mit einem großen Ausbreitungsradius fest. Der Ausbreitungsradius definiert die Größe des „Lochs“, das Sie erstellen möchten.
3. Legen Sie die entsprechende Positionierung und Abmessungen für das .hole-Element fest, um zu bestimmen, wo Sie das Loch anzeigen möchten.

Zum Beispiel erzeugt der folgende CSS-Code ein Loch im Overlay:

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

In diesem Code wird das Loch 20 Pixel vom oberen und linken Rand entfernt positioniert des Overlays mit einer Breite von 200 Pixeln und einer Höhe von 150 Pixeln. Die Box-Shadow-Eigenschaft erzeugt einen großen Schatten mit einem Ausbreitungsradius von 9999 Pixeln, wodurch die Überlagerung effektiv maskiert und der darunter liegende Inhalt sichtbar gemacht wird.

Codebeispiel:

<p>Overlay content...</p>

<div class="hole"></div>

<p>Underlying content...</p>

Dieser Code zeigt den Overlay-Inhalt an und ermöglicht Ihnen gleichzeitig, den darunter liegenden Inhalt durch das durch .hole definierte „Loch“ zu sehen Element.

Hinweis:

Mit diesem Ansatz können Sie verschiedene Locheffekte erstellen, die von einfachen transparenten Bereichen bis hin zu komplexeren und optisch ansprechenderen Designs reichen und so das Benutzererlebnis verbessern und hinzufügen Verleihen Sie Ihren Webanwendungen einen Hauch von Kunst.

Das obige ist der detaillierte Inhalt vonWie kann man mit CSS ein Overlay mit einem Loch erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!