Wie erstelle ich ein transparentes Loch in einem CSS-Overlay?

Lücke in CSS-Overlays erzeugen

Eine Lücke in einem Overlay zu schaffen, um die darunter liegenden Website-Elemente freizulegen, ist allein mit CSS möglich. Eine effektive Technik besteht darin, die Box-Shadow-Eigenschaft mit einem großen Ausbreitungsradius zu nutzen.

Um diesen Effekt zu erzielen:

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2); /* Create a transparent hole with a blue border */
}

Dieser Box-Shadow erzeugt ein großes transparentes Quadrat mit einem kleinen Blau Grenze. Dadurch entsteht effektiv ein Loch in der Überlagerung, sodass Sie den darunter liegenden Inhalt durchschauen können. Der Ausbreitungsradius von 9999 Pixel stellt sicher, dass das Loch den gesamten Overlay-Bereich abdeckt.

Beispiel-HTML:

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper...</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci...</p>

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

Dieser CSS-Code und dieses HTML-Beispiel zeigen, wie man mit ein transparentes Loch in einem Overlay erstellt Nur CSS, sodass Sie die Website-Elemente darunter sehen können.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein transparentes Loch in einem CSS-Overlay?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!