Wie erstelle ich durchsichtige Löcher in CSS-Overlays ohne JavaScript?

Durchsichtige Löcher in Overlays mit CSS erstellen

Beim Arbeiten mit Overlays kann es wünschenswert sein, darin transparente Abschnitte zu erstellen, die dies ermöglichen Betrachter können die darunter liegende Webseite durchschauen. Dieser Effekt kann allein durch CSS erreicht werden, sodass kein JavaScript erforderlich ist.

Eine effektive Methode besteht darin, die Box-Shadow-Eigenschaft mit einem außergewöhnlich großen Ausbreitungsradius zu nutzen. Auf diese Weise erzeugen Sie im Wesentlichen einen ausgedehnten Schatten, der die darunter liegenden Elemente überlappt und sie effektiv verdeckt.

Um diese Technik zu veranschaulichen, betrachten Sie den folgenden CSS-Code:

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

Bei Anwendung auf eine HTML-Element erzeugt dieser Code ein transparentes Loch innerhalb der Überlagerung, wie im folgenden Beispiel zu sehen ist:

HTML:

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper. Mea ei aeque feugiat, cum ut utinam conceptam, in pro partem veritus molestiae. Omnis efficiantur an eum, te mel quot perpetua. Ad duo autem dolore, vocent lucilius te cum, ut duo quem singulis.</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci. Ei eam ipsum dissentiunt. Ei vel accusam dolores efficiantur.</p>

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

Abschließend: Verwenden Sie box-shadow mit einem großen Der Ausbreitungsradius bietet eine einfache und effektive Möglichkeit, transparente Löcher in CSS-Overlays zu erstellen und so einen dynamischen und optisch ansprechenden Effekt zu erzielen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich durchsichtige Löcher in CSS-Overlays ohne JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!