如何创建：覆盖层效果

సిఎస్ఎస్ ఉపయోగించి ఓవర్‌లేయర్ ప్రభావాన్ని సృష్టించండి (ఒక ఓవర్‌లేయర్ ప్రభావం).

ఓవర్‌లేయర్ ప్రభావాన్ని సృష్టించండి ఎలా

మొదటి చర్య - హైల్టెక్స్ జోడించండి:

ఏదైనా ఎలిమెంట్ను ఉపయోగించండి మరియు డాక్యుమెంట్లో ఏదైనా స్థానంలో ఉంచండి:

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

రెండవ చర్య - సిఎస్ఎస్ జోడించండి:

ఓవర్‌లేయర్ ఎలిమెంట్స్ స్టైల్స్ నిర్దేశించండి:

#overlay {
  position: fixed; /* పేజీ కంటెంట్లపైన ఉంచబడింది */
  display: none; /* డిఫాల్ట్గా మరగుపడివేయబడింది */
  width: 100%; /* పూర్తి వెడల్పు (పేజీ మొత్తం వెడల్పును కప్పివేసి) */
  height: 100%; /* పూర్తి ఎత్తు (పేజీ మొత్తం ఎత్తును కప్పివేసి) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* పారదర్శకతను కలిగిన నలుపు బ్యాక్‌గ్రౌండ్ */
  z-index: 2; /* ఇతర ఎలిమెంట్స్ వాటికి వివిధ క్రమాన్ని నిర్దేశించండి */
  cursor: pointer; /* హోవర్‌లో మౌస్ పింటర్ జోడించండి */
}

మూడవ చర్య - జావాస్క్రిప్ట్ జోడించండి:

జావాస్క్రిప్ట్ ఉపయోగించి ఓవర్‌లేయర్ ప్రభావాన్ని తెరిచివేసి మరియు మూసివేయండి:

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

亲自试一试

టెక్స్ట్‌తో ఓవర్‌లేయర్ ప్రభావం

మీరు ఏదైనా అనుకుంటున్న కంటెంట్ను ఓవర్‌లేయర్‌లో జోడించండి మరియు మీకు కావలసిన స్థానంలో ఉంచండి. ఈ ఉదాహరణలో, మేము పేజీ మధ్యలో టెక్స్ట్ను జోడించాము:

ప్రత్యేకం

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

亲自试一试