Maska-pozīcija - CSS-triki

Anonim

CSS mask-positionrekvizīts norāda maskas slāņa attēla sākotnējo pozīciju attiecībā pret maskas pozīcijas laukumu. Tas darbojas tāpat kā background-positionīpašums.

.element ( mask-image: url("star.svg"); mask-position: 20px center; )

Maskēšana ļauj parādīt izvēlētās elementa daļas, paslēpjot pārējās. Šajā demonstrācijā varat mainīt maskas slāņa attēla pozīciju:

Sintakse

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Sākotnējā vērtība: 0% 0%
  • Attiecas uz: visiem elementiem. SVG tas attiecas uz konteinera elementiem, izņemot elementu, visus grafiskos elementus un elementu.
  • Mantots: nē
  • Aprēķinātā vērtība: sastāv no diviem atslēgvārdiem, kas apzīmē izcelsmi, un diviem šīs izcelsmes nobīdēm, katrs no tiem norādīts kā absolūtais garums (ja norādīts a ), citādi procentos.
  • Animācijas veids: atkārtojams saraksts

Vērtības

Var norādīt uz ofseta atslēgvārdus ( top, left, bottom, right, un center), procentus, un garuma vērtības attiecībā malas elementu, līdzīgi CSS background-positionīpašumu.

/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center; 
 /* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh; 
 /* Percentage values */ mask-position: 25% 50%; 
 /* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;

Vērtību definīcijas

  • : Jebkurš derīgs CSS garums (piemēram px, em, remun %, starp citu), kas norādītu, cik tālu mala masku attēlu no attiecīgās malas elementa.
  • : Norāda maskas slāņa attēla pozīciju kā procentuālo vērtību attiecībā pret maskas pozicionēšanas laukumu mīnus maskas attēla izmērs.
  • top: Līdzvērtīgs 0% vertikālajam stāvoklim.
  • right: Līdzvērtīgs 100% horizontālajam stāvoklim.
  • bottom: Līdzvērtīgs 100% vertikālajam stāvoklim.
  • left: Līdzvērtīgs 0% horizontālajam stāvoklim.
  • center: Līdzvērtīgs 50% horizontālajam stāvoklim, ja horizontālais stāvoklis nav norādīts citādi, vai 50% vertikālajam stāvoklim, ja tāds ir.
  • initial: Piemēro īpašuma noklusējuma iestatījumu, kas ir 0% 0%.
  • inherit: Pieņem mask-positionvecāku vērtību.
  • unset: Noņem strāvu mask-positionno elementa.

Vairāku vērtību izmantošana

Šis rekvizīts var ņemt komatu atdalītu vērtību masku pozīciju sarakstu, un katra vērtība tiek piemērota attiecīgajam mask-imagerekvizītā norādītajam maskas slāņa attēlam . Šajā piemērā pirmā vērtība norāda pirmā attēla pozīciju, otrā vērtība norāda otrā attēla pozīciju utt.

.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )

Atšķirīga sintakse

mask-position var norādīt vienu, divas, trīs vai četras vērtības, lai norādītu maskas slāņa pozīciju horizontāli un vertikāli.

Viena vērtība

Ja tiek iestatīta viena vērtība , tas tiek uzskatīts par horizontālo vērtību un tiek pieņemts, ka tā ir vertikālā vērtība center.

mask-position: 100px; /* 100px center */
Divas vērtības

Pāru vērtību izmantošanas gadījumā pirmais tiek uzskatīts par horizontālo vērtību, bet otrais norāda izgatavošanas slāņa pozīciju vertikāli.

mask-position: 10% 50%; /* x=10%, Y=50% */

Ja abas vērtības ir atslēgvārdi, atslēgvārdu secībai nav nozīmes:

mask-position: top left; /* = left top */

Bet, kad mums ir atslēgvārda un garuma vai procentuālā kombinācija, secībai ir nozīme, un pirmā vērtība vienmēr atbilst horizontālajai nobīdei. Tādēļ:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Trīs vērtības

Ja tiek dotas trīs vērtības, tiek pieņemts, ka trūkstošā nobīde ir nulle:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Četras vērtības

Četru vērtību sintakse ļauj norādīt, kurām elementa pusēm masku novietojat attiecībā pret (1. un 3. vērtība), un pēc tam attālumu no šīm pusēm (2. un 4. vērtība).

Tātad, ja vēlaties novietot masku 100 pikseļu attālumā no elementa apakšas un 200 pikseļus no labās puses, varat rīkoties šādi:

mask-position: bottom 100px right 200px;

Animācijas maskas

Ir iespējams animēt maskas pozīciju un mask-sizeizmantot atslēgkadra animāciju un CSS pāreju, piemēram:

.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; ) 
 .element:hover ( mask-position: right 10px bottom 10px; )

Šajā nākamajā demonstrācijā mēs animējam maskas slāņa pozīciju, izmantojot atslēgkadra animāciju:

Demonstrācija

Mainiet vērtību mask-positionšajā demonstrācijā:

Pārlūkprogrammas atbalsts

IE Mala Firefox Chrome Safari Opera
Nē 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Android pārlūks iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Avots: caniuse

Vairāk informācijas

  • CSS maskēšanas modulis, 1. līmenis (redaktora melnraksts)
  • Nogriešana un maskēšana CSS
  • Nogriešana pret maskēšanu: kad katru lietot
  • # 185: Spēle ar CSS maskām (video)