Hoe OM - Overlay
Leer hoe om 'n oorleg-effek met CSS te skep.
Oorleg
Leer hoe om 'n oorleg-effek te skep:
Oorleg
Hoe om 'n oorleg effek te skep
Stap 1) Voeg HTML by:
Gebruik enige element en plaas dit enige plek binne die dokument:
Voorbeeld
<div id="overlay"></div>
Stap 2) Voeg CSS by:
Stileer die oorlegelement:
Voorbeeld
#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 */
}
Stap 3) Voeg JavaScript by:
Gebruik JavaScript om die oorleg-effek aan en af te skakel:
Voorbeeld
function on() {
document.getElementById("overlay").style.display
= "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
Oorleg effek met teks
Voeg enigiets wat jy wil binne die oorleg, en plaas dit waar jy wil. In hierdie voorbeeld voeg ons teks in die middel van die bladsy by:
Voorbeeld
<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>