कैसे करें - ओवरले
CSS के साथ ओवरले प्रभाव बनाने का तरीका जानें।
उपरिशायी
ओवरले प्रभाव बनाने का तरीका जानें:
उपरिशायी
ओवरले प्रभाव कैसे बनाएं
चरण 1) HTML जोड़ें:
किसी भी तत्व का उपयोग करें और उसे दस्तावेज़ के अंदर कहीं भी रखें:
उदाहरण
<div id="overlay"></div>
चरण 2) सीएसएस जोड़ें:
ओवरले तत्व को स्टाइल करें:
उदाहरण
#overlay {
position: fixed; /* Sit on top of the
page content */
display: none; /* Hidden by default */
width: 100%; /*
Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2;
/* Specify a stack order in case you're using a different order for other
elements */
cursor: pointer; /* Add a pointer on hover */
}
चरण 3) जावास्क्रिप्ट जोड़ें:
ओवरले प्रभाव को चालू और बंद करने के लिए जावास्क्रिप्ट का प्रयोग करें:
उदाहरण
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>