Gewusst wie: Überlagern
Erfahren Sie, wie Sie mit CSS einen Overlay-Effekt erstellen.
Überlagerung
Erfahren Sie, wie Sie einen Überlagerungseffekt erstellen:
Überlagerung
So erstellen Sie einen Overlay-Effekt
Schritt 1) HTML hinzufügen:
Verwenden Sie ein beliebiges Element und platzieren Sie es an einer beliebigen Stelle im Dokument:
Beispiel
<div id="overlay"></div>
Schritt 2) CSS hinzufügen:
Gestalten Sie das Overlay-Element:
Beispiel
#overlay {
position: fixed; /* Sit on top of the
page content */
display: none; /* Hidden by default */
width: 100%; /*
Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2;
/* Specify a stack order in case you're using a different order for other
elements */
cursor: pointer; /* Add a pointer on hover */
}
Schritt 3) JavaScript hinzufügen:
Verwenden Sie JavaScript, um den Overlay-Effekt ein- und auszuschalten:
Beispiel
function on() {
document.getElementById("overlay").style.display
= "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
Overlay-Effekt mit Text
Fügen Sie alles, was Sie möchten, in das Overlay ein und platzieren Sie es an der gewünschten Stelle. In diesem Beispiel fügen wir Text in der Mitte der Seite hinzu:
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>