K如何创建：覆盖层效果

CSS kullanarak körelim etkisini nasıl oluşturacağınızı öğrenin (bir tür üst katman etkisi).

Körelim etkisini nasıl oluşturacağınızı öğrenin

Birinci adım - HTML ekleme:

Herhangi bir element kullanın ve belgedeki herhangi bir konuma yerleştirin:

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

İkinci adım - CSS ekleme:

Körelim elementinin stillerini ayarlayın:

#overlay {
  position: fixed; /* Sayfa içeriğinin üstünde konumlandırılır */
  display: none; /* Varsayılan olarak gizli */
  width: 100%; /* Tam genişlik (sayfanın tamamını kaplar) */
  height: 100%; /* Tam yükseklik (sayfanın tamamını kaplar) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Şeffaflık içeren siyah arka plan */
  z-index: 2; /* Diğer elemanlar için farklı sıralama kullanıyorsanız, katman sıralamasını belirtin */
  cursor: pointer; /* Fare üzerindeyken mouse imlecini ekle */
}

Üçüncü adım - JavaScript ekleme:

JavaScript kullanarak körelim etkisini açma ve kapatma:

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

Kişisel Olarak Deneyin

Metin içeren körelim etkisi

Körelimde istediğiniz herhangi bir içeriği ekleyin ve istediğiniz konuma yerleştirin. Bu örnekte, sayfa ortasında metin ekledik:

Örnek

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

Kişisel Olarak Deneyin