Wie erstelle ich Lücken in CSS-Overlays?

Lücken in CSS-Overlays erzeugen

Es ist möglich, einen Effekt zu erzeugen, der ein Loch in einem Overlay hinterlässt, sodass der darunter liegende Inhalt durchscheinen kann .

Verwenden von CSS Box Shadow

Um diesen Effekt zu erzielen, verwenden Sie die CSS-Box-Shadow-Eigenschaft mit einem großen Ausbreitungsradius.

box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);

Dadurch entsteht ein großer, durchscheinender Schatten um das Element.

Beispiel

Im folgenden Beispiel wird ein „Loch“ im Overlay-Div mit der Klasse „hole“ erstellt:

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

<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>

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