mask-image

Misol

Rasm uchun maska qatlami yarating:

.mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); mask-size: 70%; mask-repeat: no-repeat; }

Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.

Ta’rif va qo‘llanilishi

mask-image xususiyati element uchun maska qatlami sifatida ishlatiladigan rasmni belgilaydi.

Maslahat: CSS’dagi chiziqli va radial gradientlardan ham maska rasmi sifatida foydalanish mumkin.

Standart qiymat:	none
Meros qilinadi:	yo‘q
Animatsiya qilinadi:	yo‘q. animatable haqida o‘qing
Versiya:	CSS Masking moduli, 1-daraja
JavaScript sintaksisi:	object.style.maskImage="url(star.svg)"

Brauzerlarda qo‘llab-quvvatlash

Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.

-webkit- bilan keladigan sonlar prefiks bilan ishlagan birinchi versiyani bildiradi.

Xususiyat
mask-image	120	120	53	15.4	15 -webkit-

CSS sintaksisi

mask-image: none|image|url()|initial|inherit;

Xususiyat qiymatlari

Qiymat	Tavsif
none	Bu standart qiymat
image	Maska qatlami sifatida ishlatiladigan rasm
url()	Rasmga yoki SVG <mask> elementiga URL havola
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 { -webkit-mask-image: linear-gradient(black, transparent); mask-image: linear-gradient(black, transparent); } .mask2 { -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%); mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%); } .mask3 { -webkit-mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5) 50%); mask-image: radial-gradient(black 50%, rgba(0, 0, 0, 0.5)); }

O‘zingiz sinab ko‘ring »