如何创建：覆盖层效果

Belajar cara membuat efect lapis latar menggunakan CSS (sebuah efect yang di atas).

Cara Membuat Efect Lapis Latar

Tahap Pertama - Tambahkan HTML:

Gunakan elemen apapun dan letakkan di tempat apapun di dokumen:

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

Tahap Kedua - Tambahkan CSS:

Atur gaya elemen lapis latar:

#overlay {
  position: fixed; /* Berada di atas konten halaman */
  display: none; /* Tersimpan secara default */
  width: 100%; /* Lebar penuh (melampasi seluruh halaman) */
  height: 100%; /* Tinggi penuh (melampasi seluruh halaman) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Latar belakang hitam dengan kecerahan */
  z-index: 2; /* Jika anda gunakan urutan yang berbeda untuk elemen lain, tentukan urutan tumpukan */
  cursor: pointer; /* Tambahkan pengepakan mouse saat diarahkan */
}

Tahap Ketiga - Tambahkan JavaScript:

Buka dan tutup efect lapis latar menggunakan JavaScript:

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

Coba sendiri

Efect Lapis Latar Dengan Teks

Tambahkan apa pun konten yang andainginkan ke lapis latar dan letakkan di tempat yang andainginkan. Dalam contoh ini, kami menambahkan teks di tengah halaman:

Contoh

<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">Teks Lapis Latar</div>
</div>

Coba sendiri