Wie kann ich nur mit CSS eine Lücke in einem Overlay erzeugen, um den darunter liegenden Inhalt freizulegen?

Ebenenlücken in CSS maskieren

Das Erstellen von Maskenebenen auf einer Website und die Wahrung der Sichtbarkeit des darunter liegenden Inhalts ist ein häufiges Bedürfnis. In diesem Artikel wird untersucht, wie dieser Effekt mit reinem CSS erzielt werden kann.

Frage

Wie erstelle ich ein Loch in der Maskenebene, damit der Benutzer den Inhalt der darunter liegenden Website durch die Maskenebene sehen kann?

CSS-Lösung

Verwenden Sie die Box-Shadow-Eigenschaft, um Löcher in der Maskenebene zu erzeugen. Diese Eigenschaft ermöglicht die Erzeugung eines Schattens um ein Element. Durch die Ausbreitung eines sehr großen Schattens kann ein im Wesentlichen transparenter Bereich erzeugt werden.

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

Wie oben gezeigt, stellen wir den Erweiterungsradius auf einen sehr großen Wert (9999 Pixel) ein. Dadurch wird ein Schatten erzeugt, der fast die gesamte Maskenebene bedeckt, während der transparente Bereich in der Mitte der Maskenebene erhalten bleibt.

Codebeispiel

#underground {
  background-color: #725;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

#overlay #center {
  width: 400px;
  height: 200px;
  background-color: #ABD;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
  border-width: 100%;
  border-color: #FFF;
  border-style: solid;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

<div>

Fazit

Durch die Verwendung der Box-Shadow-Eigenschaft haben wir erfolgreich ein Loch in der Maskenebene erstellt. Diese Technik gibt Entwicklern die Flexibilität, Maskenebenen zu erstellen und gleichzeitig die Sichtbarkeit des zugrunde liegenden Inhalts beizubehalten, wodurch die Möglichkeiten von CSS erweitert werden.

Das obige ist der detaillierte Inhalt vonWie kann ich nur mit CSS eine Lücke in einem Overlay erzeugen, um den darunter liegenden Inhalt freizulegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!