Wie wird erstellt: Überlagerungseffekt

Lernen Sie, wie man mit CSS einen Überlagerungseffekt erstellt (ein Überlagerungseffekt).

Wie man einen Überlagerungseffekt erstellt

Erster Schritt - Fügen Sie HTML hinzu:

Verwenden Sie beliebige Elemente und positionieren Sie sie an jedem Ort im Dokument:

<div id="overlay"></div>

Zweiter Schritt - Fügen Sie CSS hinzu:

Stellen Sie die Stile des Überlagerungselements ein:

#overlay {
  position: fixed; /* Über dem Inhalt der Seite positioniert */
  display: none; /* Standardmäßig versteckt */
  width: 100%; /* Ganze Breite (deckt die gesamte Seite ab) */
  height: 100%; /* Ganze Höhe (deckt die gesamte Seite ab) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Transparenter schwarzer Hintergrund */
  z-index: 2; /* Wenn Sie andere Elemente in einer anderen Reihenfolge verwenden, geben Sie die Stapelreihenfolge an */
  cursor: pointer; /* Fügt den Mauszeiger bei der Überlagerung hinzu */
}

Dritter Schritt - Fügen Sie JavaScript hinzu:

Öffnen und Schließen des Überlagerungseffekts mit JavaScript:

function on() {
  document.getElementById("overlay").style.display = "block";
}
function off() {
  document.getElementById("overlay").style.display = "none";
}

Try it yourself

Überlagerungseffekt mit Text

Fügen Sie beliebige Inhalte in die Überlagerung ein und positionieren Sie sie, wo Sie möchten. In diesem Beispiel haben wir den Text in der Mitte der Seite hinzugefügt:

Beispiel

<style>
#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
</style>
<div id="overlay">
  <div id="text">Overlay Text</div>
</div>

Try it yourself