Kuinka luoda: Peittokerrosvaikutus
- Edellinen sivu Käyttäjäarvio
- Seuraava sivu Yhteystietojen mikrosiru
Opi luomaan peittokerrosvaikutus CSS:n avulla (yksi peittokerrosvaikutus).
Peittokerros
Opi luomaan peittokerrosvaikutus:
Peittokerros
Miten luoda peittokerrosvaikutus
Vaihe 1 - Lisää HTML:
Käytä mitä tahansa elementtiä ja aseta se dokumentin mihin tahansa sijaintiin:
<div id="overlay"></div>
Vaihe 2 - Lisää CSS:
Aseta peittokerros-elementin tyylit:
#overlay { position: fixed; /* Sijaitsee sivun sisällön ylärinnässä */ display: none; /* Oletusarvoisesti piilotettu */ width: 100%; /* Täysleveys (peittää koko sivun) */ height: 100%; /* Täyskorkea (peittää koko sivun) */ top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); /* Transparentti musta tausta */ z-index: 2; /* Jos käytät muita elementtejä eri järjestyksessä, määritä kerrostusjärjestys */ cursor: pointer; /* Lisää hiiren osoitin hiiren osoitettavaksi */ }
Vaihe 3 - Lisää JavaScript:
Avaa ja sulje peittokerrosvaikutus JavaScriptilla:
function on() { document.getElementById("overlay").style.display = "block"; } function off() { document.getElementById("overlay").style.display = "none"; }
Tekstillä varustettu peittokerros
Lisää mikä tahansa haluamasi sisältö peittävään kerrokseen ja aseta se haluamaasi sijaintiin. Tässä esimerkissä lisäsimme tekstin sivun keskelle:
Esimerkki
<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>
- Edellinen sivu Käyttäjäarvio
- Seuraava sivu Yhteystietojen mikrosiru