Položaj maske - CSS-trikovi

Anonim

U CSS-u mask-positionsvojstvo specificira početni položaj slike sloja maske u odnosu na područje položaja maske. Djeluje poput background-positionimovine.

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

Maskiranje vam omogućuje prikaz odabranih dijelova elementa dok skrivate ostatak. U sljedećoj demonstraciji možete promijeniti položaj slike sloja maske:

Sintaksa

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Početna vrijednost: 0% 0%
  • Odnosi se na: sve elemente. U SVG-u se odnosi na elemente spremnika isključujući element, sve grafičke elemente i element.
  • Naslijeđeno: ne
  • Izračunata vrijednost: sastoji se od: dvije ključne riječi koje predstavljaju podrijetlo i dva pomaka od tog podrijetla, a svaka se daje kao apsolutna duljina (ako je dana a ), inače u postocima.
  • Vrsta animacije: ponovljivi popis

Vrijednosti

Može biti naveden u smislu pomaka riječi ( top, left, bottom, right, i center), postoci, i dužine vrijednosti u vezi rubove elementa, slično CSS background-positionimovine.

/* 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;

Definicije vrijednosti

  • : Svaki valjani duljina CSS (kao što su px, em, remi %, među ostalima) koji će odrediti koliko je rub maske slika je od odgovarajućeg ruba elementa.
  • : Određuje položaj slike sloja maske kao postotnu vrijednost u odnosu na područje pozicioniranja maske umanjenu za veličinu slike maske.
  • top: Ekvivalentno 0% za okomiti položaj.
  • right: Ekvivalentno 100% za vodoravni položaj.
  • bottom: Ekvivalentno 100% za okomiti položaj.
  • left: Ekvivalentno 0% za vodoravni položaj.
  • center: Ekvivalentno 50% za vodoravni položaj ako vodoravni položaj nije drugačije naveden, ili 50% za vertikalni položaj, ako jest.
  • initial: Primjenjuje zadanu postavku svojstva, koja je 0% 0%.
  • inherit: Prihvaća mask-positionvrijednost roditelja.
  • unset: Uklanja struju mask-positioniz elementa.

Korištenje više vrijednosti

Ovo svojstvo može uzeti popis vrijednosti odvojenih zarezom za položaje maske i svaka se vrijednost primjenjuje na odgovarajuću sliku sloja maske navedenu u mask-imagesvojstvu. U slijedećem primjeru prva vrijednost određuje položaj prve slike, druga vrijednost određuje položaj druge slike itd.

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

Različita sintaksa

mask-position može uzeti jednu, dvije, tri ili četiri vrijednosti za određivanje položaja sloja maske vodoravno i okomito.

Pojedinačna vrijednost

U slučaju da je postavljena jedna vrijednost , to se uzima kao vodoravna vrijednost, a pretpostavlja se da je okomita vrijednost center.

mask-position: 100px; /* 100px center */
Dvije vrijednosti

U slučaju korištenja vrijednosti para, prva se uzima kao vodoravna vrijednost, a druga određuje položaj sloja izrade vertikalno.

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

Ako su obje vrijednosti ključne riječi, tada redoslijed ključnih riječi nije bitan:

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

Ali kada imamo kombinaciju ključne riječi i duljine ili postotka, redoslijed je važan i prva vrijednost uvijek odgovara vodoravnom pomicanju. Stoga:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Tri vrijednosti

Ako se daju tri vrijednosti, pretpostavlja se da je pomak koji nedostaje jednak nuli:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Četiri vrijednosti

Sintaksa s četiri vrijednosti omogućuje vam da odredite na koje strane elementa postavljate masku u odnosu (vrijednosti 1 i 3), a zatim udaljenost od tih stranica (vrijednosti 2 i 4).

Dakle, ako želite postaviti masku 100px s dna elementa i 200px s desne strane, možete učiniti sljedeće:

mask-position: bottom 100px right 200px;

Animirajuće maske

Moguće je animirati položaj maske i mask-sizekoristeći animaciju ključnog kadra i CSS prijelaz, kao što je sljedeće:

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

U sljedećem pokaznom prikazu animiramo položaj sloja maske koristeći animaciju ključnog kadra:

Demo

Promijenite vrijednost za mask-positionu sljedećem pokaznom prikazu:

Podrška preglednika

IE Rub Firefox Krom Safari Opera
Ne 18+ 53+ 4+ 3,2+ 15+
Android Chrome Android Firefox Android preglednik iOS Safari Opera Mobile
85+ 79+ 2.1+ 3,2+ 59+
Izvor: caniuse

Više informacija

  • CSS modul za maskiranje razina 1 (urednikov nacrt)
  • Isecanje i maskiranje u CSS-u
  • Isecanje i maskiranje: kada koristiti svaku
  • # 185: Igranje s CSS maskama (video)