Kaukės dydis - CSS-gudrybės

Anonim

CSS savybė mask-size nurodo kaukės sluoksnio vaizdo dydį. Daugeliu atžvilgių jis veikia labai panašiai kaip background-sizeturtas.

.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-sizesavybė.

Š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 autoarba vienas iš dviejų raktinių žodžių ( coverir 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, remir %, 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ė yra border-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 yra auto.
  • inherit: Priima tėvų kaukės dydžio vertę.
  • unset: Pašalina srovę mask-sizeiš 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-imageypatybė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; )

autovertė

Jei turto vertė mask-sizenurodoma 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-sizenurodoma autoir 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 coverircontain

Š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
Šaltinis: caniuse

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)