Qoplama effekti (overlay)
CSS yordamida qoplama (overlay) effektini yaratishni o‘rganing.
Qoplama (overlay)
Qoplama effektini yaratishni o‘rganing:
Qoplama (overlay)
Qoplama effekti qanday yaratiladi
1-qadam) HTML qo‘shing:
Istalgan elementdan foydalaning va uni hujjat ichida istalgan joyga joylashtiring:
Misol
<div id="overlay"></div>
2-qadam) CSS qo‘shing:
Qoplama elementiga uslub bering:
Misol
#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-qadam) JavaScript qo‘shing:
Qoplama effektini yoqish va o‘chirish uchun JavaScript’dan foydalaning:
Misol
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
O‘zingiz sinab ko‘ring »
Matnli qoplama effekti
Qoplama ichiga xohlagan narsangizni qo‘shing va uni istalgan joyga joylashtiring. Bu misolda sahifa o‘rtasiga matn qo‘shamiz:
Misol
<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>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!