Jak tworzyć: efekt pokrycia

Naucz się, jak stworzyć efekt warstwy nadkrywającej za pomocą CSS (rodzaj efektu叠加).

Jak stworzyć efekt warstwy nadkrywającej

Krok pierwszy - Dodaj HTML:

Użyj dowolnego elementu i umieść go w dowolnym miejscu dokumentu:

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

Krok drugi - Dodaj CSS:

Ustaw styl elementu warstwy nadkrywającej:

#overlay {
  position: fixed; /* Położone nad treścią strony */
  display: none; /* Domyślnie ukryte */
  width: 100%; /* Pełna szerokość (nadkrywa całą stronę) */
  height: 100%; /* Pełna wysokość (nadkrywa całą stronę) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Czarny tło z przezroczystością */
  z-index: 2; /* Jeśli używasz innego porządku dla innych elementów, określ kolejność warstw */
  cursor: pointer; /* Dodaj wskaźnik myszy przy nawigacji */
}

Krok trzeci - Dodaj JavaScript:

Otwórz i zamknij efekt warstwy nadkrywającej za pomocą JavaScript:

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

Spróbuj sam

Efekt warstwy nadkrywającej z tekstem

Dodaj dowolny treść, którą chcesz, i umieść ją w pożądanym miejscu. W tym przykładzie dodaliśmy tekst w środku strony:

Przykład

<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>

Spróbuj sam