CSS niqoblash
CSS mask-image xossasi
CSS masking element ustiga qatlam (maska) qo‘yish imkonini beradi — elementning bir qismini yoki butunlay yashirish uchun.
CSS mask-image xossasi maska qatlami rasmini belgilaydi.
Mask qatlam rasmi PNG rasm, SVG rasm, CSS gradient yoki SVG <mask> elementi bo‘lishi mumkin.
PNG rasmni maska qatlami sifatida ishlatish
PNG rasmini maska qatlami sifatida ishlatish uchun url() qiymati bilan maska qatlami rasmini o‘tkazing.
Maska rasmi shaffof yoki yarim shaffof hududga ega bo‘lishi kerak. Qora — to‘liq shaffoflikni bildiradi.
Mana ishlatadigan maska rasmi ("w3logo.png"):
Mana Italiyadagi Cinque Terredan olingan surat:
Endi maska rasmini Italiyaning Cinque Terre shahridagi rasm uchun maska qatlami sifatida qo‘llaymiz:
Misol
Mana manba kod:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
mask-repeat: no-repeat;
}
O‘zingiz sinab ko‘ring »
mask-image xossasi element uchun maska qatlami sifatida ishlatiladigan rasmini belgilaydi.
mask-repeat xossasi maska rasmining takrorlanishini va qanday takrorlanishini belgilaydi. no-repeat qiymati maska rasmi takrorlanmasligini bildiradi (maska rasmi faqat bir marta ko‘rsatiladi).
Maska qatlami rasmini takrorlash
Agar mask-repeat xossasini ko‘rsatmasak, maska rasmi Italiyaning Cinque Terre shahridagi rasm bo‘ylab takrorlanadi:
Misol
mask-repeat xossasini ko‘rsatmaslik:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
}
O‘zingiz sinab ko‘ring »
Maska qatlami rasmining joylashuvini belgilash
mask-position xossasi maska rasmining boshlang‘ich joylashuvini belgilaydi (maska joylashuv maydoniga nisbatan). Standart holda maska rasmi elementning chap-yuqori burchagiga joylashtiriladi va vertikal ham, gorizontal ham takrorlanadi.
Bu yerda maska rasmini markazda joylashtiramiz:
Misol
Maska qatlami rasmining joylashuvini belgilash:
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image:
url(w3logo.png);
mask-repeat: no-repeat;
mask-position:
center;
}
O‘zingiz sinab ko‘ring »
Barcha CSS masking xossalari
Quyidagi jadval barcha CSS masking xossalarini sanab o‘tadi:
| Xususiyat | Tavsif |
|---|---|
| mask-clip | Niqob tasviri qaysi hududga ta’sir qilishini belgilaydi |
| mask-composite | Joriy niqob qatlamida, uning ostidagi niqob qatlamlarida qo‘llaniladigan kompozitsion operatsiyani belgilaydi |
| mask-image | Element uchun niqob qatlami sifatida foydalaniladigan tasvirni belgilaydi |
| mask-mode | Niqob qatlami tasvirining yorqinlik niqobi yoki alfa niqobi sifatida ko‘rib chiqilishini belgilaydi |
| mask-origin | Niqob qatlami rasmining boshlanish joyini (niqob joylashuv sohasini) belgilaydi |
| mask-position | Niqob qatlami rasmining boshlang‘ich joylashuvini o‘rnatadi (niqob joylashuv sohasiga nisbatan) |
| mask-repeat | Niqob qatlami tasviri qanday takrorlanishini belgilaydi |
| mask-size | Niqob qatlami tasvirining hajmini belgilaydi |
| mask-type | SVG <maska> elementi yorqinlik niqobi yoki alfa niqobi sifatida ko‘rib chiqilishini belgilaydi. |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!