CSS savybė mask-size nurodo kaukės sluoksnio vaizdo dydį. Daugeliu atžvilgių jis veikia labai panašiai kaip background-size
turtas.
.element ( mask-image: url(star.svg); mask-size: 200px 100px; )
Maskavimas leidžia rodyti pasirinktas elemento dalis, o paslėpti likusias. Kaukės dydį apibrėžia mask-size
savybė.
Šioje demonstracijoje galite žaisti su kaukės sluoksnio vaizdo dydžiu:
Sintaksė
mask-size: = ( = | | auto )(1,2) | cover | contain
- Pradinė vertė: auto
- Taikoma visiems elementams. SVG jis taikomas konteinerio elementams, išskyrus
elementą, visus grafikos elementus ir
elementą
- Paveldima: ne
- Animacijos tipas: pakartojamas sąrašas
Iš esmės sakoma, kad sintaksė priima fono dydžio ( ) vertę, kuri gali būti vienas arba du ilgiai ir (arba) procentai (
), nustatyta
auto
arba vienas iš dviejų raktinių žodžių ( cover
ir contain
).
- Kai naudojamos dvi reikšmės , pirmoji reikšmė nurodo kaukės vaizdo plotį , o antroji - jos aukštį .
- Kai naudojama viena reikšmė, kurios nėra arba nėra viršelio, ji apibrėžia kaukės vaizdo plotį ir manoma, kad aukštis yra
auto
.
Vertybės
/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */
/* Keywords */ mask-size: contain; mask-size: cover;
/* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;
Vertės apibrėžimai
: Bet galioja ir ne neigiami CSS ilgis, pavyzdžiui
px
,em
,rem
ir%
, be kita ko.: Nurodo kaukės sluoksnio vaizdo dydį procentine verte, palyginti su kaukės padėties sritimi, kurią nustato vertė
mask-origin
. Pagal numatytuosius nustatymus ši reikšmė yraborder-box
, tai reiškia, kad joje yra rėmeliai, užpildas ir langelio turinys.auto
: Naudojamas vidinis kaukės vaizdo aukštis ir plotis, o vaizdams, pvz., Nuolydžiams, neturintiems vidinių matmenų, jie pateikiami pagal kaukės padėties srities dydį.contain
: Kaukės vaizdas keičiamas, išlaikant jo vidinę proporciją taip, kad ir jo plotis, ir aukštis galėtų tilpti į kaukės padėties sritį. Vaizdai, pvz., Nuolydžiai, neturintys vidinių matmenų, atvaizduojami pagal kaukės padėties nustatymo srities dydį.cover
: Keičia kaukės vaizdą, išlaikydama jo vidinę proporciją taip, kad ir jo plotis, ir aukštis galėtų visiškai padengti kaukės padėties sritį. Vaizdai, pvz., Nuolydžiai, neturintys būdingų matmenų, atvaizduojami pagal kaukės padėties nustatymo srities dydį.initial
: Taiko numatytąjį nuosavybės nustatymą, kuris yraauto
.inherit
: Priima tėvų kaukės dydžio vertę.unset
: Pašalina srovęmask-size
iš elemento.
Naudojant kelias reikšmes
Ši ypatybė gali sudaryti kableliais atskirtą kaukių dydžių verčių sąrašą, o kiekviena reikšmė taikoma atitinkamam mask-image
ypatybėje nurodytam kaukės sluoksnio vaizdui .
Šiame pavyzdyje pirmoji reikšmė nurodo pirmojo vaizdo dydį, antroji reikšmė nurodo antrojo vaizdo dydį ir pan.
.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )
auto
vertė
Jei turto vertė mask-size
nurodoma taip auto
:
.element ( mask-size: auto auto; /* or */ mask-size: auto; )
... tada kaukės vaizdas keičiasi atitinkamomis kryptimis, kad išlaikytų jo formato santykį. Be to, galime gauti įvairių rezultatų, atsižvelgdami į vidinius vaizdo matmenis ir proporcijas.
Proporcija / aspektas | Nėra vidinių matmenų | Vienas vidinis matmuo | Abu būdingi matmenys |
---|---|---|---|
Turi proporciją | Pateikiama taip, tarsi vietoje jų būtų nurodyta | Pateikiamas tokiu dydžiu, kurį nustato tas vienas matmuo ir proporcija | Pateikiamas tokio dydžio |
Nėra proporcijos | Pateikiama pagal kaukės padėties nustatymo srities dydį | Pateikiama naudojant vidinį ir atitinkamą kaukės padėties srities matmenį | Nėra |
Jei reikšmė mask-size
nurodoma auto
ir kita neautomatinė vertė, tokia:
.element ( mask-size: auto 200px; )
… Tada:
- jei vaizdas turi vidinę proporciją , automatinė vertė apskaičiuojama naudojant nurodytą matmenį ir vidinę proporciją.
- jei vaizdas neturi vidinės proporcijos , automatinė vertė tampa atitinkamu atvaizdo vidiniu matmeniu, jei jis yra, o jei jo nėra, automatinis bus atitinkamas kaukės padėties nustatymo srities matmuo.
Supratimas cover
ircontain
Šiame vaizdo įraše paaiškinama, kaip veikia raktiniai žodžiai yra ir apima. Atkreipkite dėmesį, kad pradinė kaukės sluoksnio padėtis yra padėties nustatymo srities centre:
Jei paveikslėlyje nėra vidinio formato santykio, nurodžius dangtelį arba sudėtinį vaizdą, kaukės vaizdas atvaizduojamas pagal kaukės padėties srities dydį.
Ir ką gi yra vidinė dimensija ir vidinė proporcija?
Būdingi matmenys yra elemento plotis ir aukštis, o vidinė proporcija - jų santykis.
- Bitų žemėlapis, panašus į PNG formatą, visada turi vidinius matmenis ir vidinę proporciją.
- Vektorinis vaizdas, pvz., SVG formatas, gali turėti abu vidinius matmenis. Todėl jis taip pat turi vidinę proporciją. Jis taip pat gali turėti vieną vidinį matmenį arba be jo, ir bet kuriuo atveju jis gali turėti arba neturėti vidinės proporcijos.
- Gradientai yra tarsi vaizdai be vidinių matmenų ar vidinės proporcijos.
Naršyklės palaikymas
T.Y | Briauna | „Firefox“ | „Chrome“ | „Safari“ | Opera |
---|---|---|---|---|---|
Ne | 18+ | 53+ | Viskas | 4+ | 70 |
„Android Chrome“ | „Android Firefox“ | „Android“ naršyklė | „iOS Safari“ | „Opera Mini“ |
---|---|---|---|---|
85+ | 79+ | 4.4+ | Viskas | Viskas |
Demonstracija
Šioje demonstracijoje kaukės dydžiui naudojamas ilgis. Pabandykite pakeisti reikšmę į kitų tipų reikšmes kode ir patikrinkite rezultatą.
Daugiau informacijos
- CSS maskavimo modulis, 1 lygis
- Karpymas ir maskavimas CSS
- Karpymas prieš maskavimą: kada naudoti kiekvieną
- # 185: Žaidimas naudojant CSS kaukes (vaizdo įrašas)