Maski asend - CSS-trikid

Anonim

CSS-is määrab mask-positionatribuut maskikihi kujutise algpositsiooni maskiaseme piirkonna suhtes. See töötab nagu background-positionvara.

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

Maskeerimine võimaldab kuvada elemendi valitud osi, varjates ülejäänud osa. Järgmises demos saate muuta maskikihi pildi positsiooni:

Süntaks

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Algne väärtus: 0% 0%
  • Kehtib kõigi elementide kohta. SVG-s kehtib see konteinerelementidele, välja arvatud element, kõik graafilised elemendid ja element.
  • Päritud: ei
  • Arvutatud väärtus: koosneb kahest päritolu tähistavast märksõnast ja kahest selle päritolu nihkest, mis mõlemad on antud absoluutse pikkusena (kui on antud a ), muidu protsentides.
  • Animatsiooni tüüp: korratav loend

Väärtused

Saab määrata nii nihe märksõnad ( top, left, bottom, right, ja center), protsendid ja pikkus väärtusi seoses servad element, mis sarnaneb CSS background-positionvara.

/* 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äärtuste definitsioonid

  • : Iga valideeruv CSS pikkus (näiteks px, em, remja %, teiste hulgas), mis täpsustab, kui kaugele serva mask pilt on vastavast elemendi serva.
  • : Määrab maskikihi pildi positsiooni protsentuaalse väärtusena maski positsioneerimisala miinus maskipildi suurusest.
  • top: Võrdub vertikaalse asukoha 0% -ga.
  • right: Võrdub 100% horisontaalasendis.
  • bottom: Võrdub 100% vertikaalasendis.
  • left: Võrdub 0% horisontaalasendis.
  • center: Võrdub 50% -ga horisontaalasendis, kui horisontaalasendit pole teisiti täpsustatud, või 50% -ga vertikaalasendis, kui see on.
  • initial: Rakendab atribuudi vaikesätet, milleks on 0% 0%.
  • inherit: Võtab vastu mask-positionvanema väärtuse.
  • unset: Eemaldab voolu mask-positionelemendist.

Mitme väärtuse kasutamine

See omadus võib võtta komaga eraldatud väärtuste loendi maski positsioonide jaoks ja iga väärtus rakendatakse mask-imageatribuudis määratletud vastavale maskikihi kujutisele . Järgmises näites määrab esimene väärtus esimese pildi asukoha, teine ​​väärtus teise pildi positsiooni jne.

.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; )

Erinev süntaks

mask-position maskikihi horisontaalselt ja vertikaalselt asukoha määramiseks võib võtta ühe, kaks, kolm või neli väärtust.

Üksik väärtus

Kui määratakse üks väärtus , võetakse seda horisontaalseks väärtuseks ja vertikaalseks väärtuseks center.

mask-position: 100px; /* 100px center */
Kaks väärtust

Paariväärtuste kasutamise korral võetakse esimene horisontaalseks väärtuseks ja teine ​​määrab marki kihi positsiooni vertikaalselt.

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

Kui mõlemad väärtused on märksõnad, pole märksõnade järjestus asjakohane:

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

Kuid kui meil on märksõna ja pikkuse või protsendi kombinatsioon, on järjekord oluline ja esimene väärtus vastab alati horisontaalsele nihkele. Seetõttu:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Kolm väärtust

Kui antakse kolm väärtust, eeldatakse, et puuduv nihe on null:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Neli väärtust

Nelja väärtusega süntaks võimaldab teil määrata, millistele elemendi külgedele maski asetate (väärtused 1 ja 3) ning seejärel kauguse nendest külgedest (väärtused 2 ja 4).

Seega, kui soovite maski paigutada 100px elemendi alt ja 200px paremalt, saate teha järgmist:

mask-position: bottom 100px right 200px;

Maskide animeerimine

Maski asukohta on võimalik animeerida ja mask-sizekasutada võtmekaadri animatsiooni ning CSS-i üleminekut, näiteks järgmist:

.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; )

Selles järgmises demos animeerime võtmekaadri animatsiooni abil maskikihi positsiooni:

Demo

Muutke mask-positionjärgmise demo väärtust:

Brauseri tugi

IE Edge Firefox Chrome Safari Ooper
Ei 18+ 53+ 4+ 3,2+ 15+
Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mobile
85+ 79+ 2.1+ 3,2+ 59+
Allikas: caniuse

Rohkem informatsiooni

  • CSS-i maskeerimismoodul 1. tase (toimetaja mustand)
  • Lõikamine ja maskeerimine CSS-is
  • Lõikamine vs maskeerimine: millal neid kasutada
  • # 185: CSS-maskidega mängimine (video)