mask
Misol
Rasm uchun maska qatlami yarating:
.mask1 {
mask: url(w3logo.png) no-repeat 50% 50%;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
mask xususiyati rasmni muayyan nuqtalarda maskalash yoki qirqish orqali elementni (qisman yoki to‘liq) yashirish uchun ishlatiladi:
mask xususiyati quyidagilar uchun qisqartma xususiyatdir:
| Standart qiymat: | none match-source repeat 0% 0% border-box border-box auto add |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS Masking moduli, 1-daraja |
| JavaScript sintaksisi: | object.style.mask="url(star.svg)" |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| mask | 120 | 120 | 53 | 15.4 | 106 |
CSS sintaksisi
mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif |
|---|---|
| mask-image | Element uchun maska qatlami sifatida ishlatiladigan rasmni belgilaydi. Standart qiymati — none |
| mask-mode | Maska qatlami rasmi yorqinlik (luminance) maskasi yoki alfa (alpha) maskasi sifatida qaralishini belgilaydi. Standart qiymati — match-source |
| mask-repeat | Maska rasmi takrorlanadimi va qanday takrorlanishini o‘rnatadi. Standart qiymati — repeat |
| mask-position | Maska rasmining boshlang‘ich joylashuvini (maska joylashuv sohasiga nisbatan) o‘rnatadi. Standart qiymati — 0% 0% |
| mask-clip | Maska rasmi qaysi sohaga ta’sir qilishini belgilaydi. Standart qiymati — border-box |
| mask-origin | Maska qatlami rasmining boshlang‘ich joylashuvini (maska joylashuv sohasini) belgilaydi. Standart qiymati — border- box |
| mask-size | Maska qatlami rasmining o‘lchamini belgilaydi. Standart qiymati — auto |
| mask-composite | Joriy maska qatlamiga uning ostidagi maska qatlamlari bilan qo‘llaniladigan kompozitsiya amalini belgilaydi. Standart qiymati — add |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Chiziqli va radial gradientlar yordamida rasm uchun turli maska qatlamlarini yarating:
.mask1 {
mask: linear-gradient(black, transparent);
}
.mask2 {
mask: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
mask: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
O‘zingiz sinab ko‘ring »
Misol
Rasm uchun maska qatlami yaratishda SVG <mask> elementidan foydalaning:
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
O‘zingiz sinab ko‘ring »
Misol
Rasm uchun maska qatlami yaratishda SVG <mask> elementidan foydalaning:
<svg width="600" height="400">
<mask id="svgmask1">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: mask-clip xususiyati
CSS ma’lumotnomasi: mask-composite xususiyati
CSS ma’lumotnomasi: mask-image xususiyati
CSS ma’lumotnomasi: mask-mode xususiyati
CSS ma’lumotnomasi: mask-origin xususiyati
CSS ma’lumotnomasi: mask-position xususiyati
CSS ma’lumotnomasi: mask-repeat xususiyati
CSS ma’lumotnomasi: mask-size xususiyati
CSS darsligi: CSS masking
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!