Maske-posisjon - CSS-triks

Anonim

I CSS mask-positionspesifiserer egenskapen startposisjonen til et maskeringslagsbilde i forhold til maskeposisjonsområdet. Det fungerer som background-positioneiendommen.

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

Maskering lar deg vise utvalgte deler av et element mens du gjemmer resten. I den følgende demoen kan du endre posisjonen til maskelagbildet:

Syntaks

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Opprinnelig verdi: 0% 0%
  • Gjelder for: alle elementer. I SVG gjelder det containerelementer unntatt elementet, alle grafiske elementer og elementet.
  • Arvet: nei
  • Beregnet verdi: bestående av: to nøkkelord som representerer opprinnelsen og to forskyvninger fra den opprinnelsen, hver gitt som en absolutt lengde (hvis gitt a ), ellers i prosent.
  • Animasjonstype: repeterbar liste

Verdier

En kan spesifiseres i form av forskjøvne ordene ( top, left, bottom, right, og center), prosenter og lengdeverdier angående sidekanter på elementet, i likhet med den CSS background-positionegenskapen.

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

Verdidefinisjoner

  • : Enhver gyldig CSS lengde (slik som px, em, remog %, blant annet) som vil angi hvor langt kanten av masken bildet er fra den tilsvarende kant av elementet.
  • : Spesifiserer posisjonen til maskelagbildet som en prosentverdi i forhold til maskeposisjoneringsområdet minus størrelsen på maskebildet.
  • top: Tilsvarer 0% for vertikal posisjon.
  • right: Tilsvarer 100% for den horisontale posisjonen.
  • bottom: Tilsvarer 100% for vertikal posisjon.
  • left: Tilsvarer 0% for horisontal posisjon.
  • center: Tilsvarer 50% for den horisontale posisjonen hvis den horisontale posisjonen ikke er spesifisert på annen måte, eller 50% for den vertikale posisjonen, hvis den er.
  • initial: Bruker egenskapens standardinnstilling, som er 0% 0%.
  • inherit: Vedtar mask-positionverdien av foreldrene.
  • unset: Fjerner strømmen mask-positionfra elementet.

Bruke flere verdier

Denne egenskapen kan ta en komma-separert liste over verdier for maskerposisjoner, og hver verdi blir brukt på et tilsvarende maskeringslag som er spesifisert i mask-imageegenskapen. I det følgende eksemplet spesifiserer den første verdien posisjonen til det første bildet, den andre verdien spesifiserer posisjonen til det andre bildet og så videre.

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

Ulike syntaks

mask-position kan ta en, to, tre eller fire verdier for å spesifisere posisjonen til maskelaget horisontalt og vertikalt.

Enkeltverdi

Hvis en enkelt verdi er satt, blir den tatt som den horisontale verdien og den vertikale verdien antas å være center.

mask-position: 100px; /* 100px center */
To verdier

Ved bruk av parverdier blir den første tatt som den horisontale verdien, og den andre spesifiserer posisjonen til merkelaget vertikalt.

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

Hvis begge verdiene er nøkkelord, er rekkefølgen på nøkkelordene ikke relevante:

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

Men når vi har en kombinasjon av nøkkelord og lengde eller prosent, betyr ordren og den første verdien tilsvarer alltid den horisontale forskyvningen. Derfor:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Tre verdier

Hvis tre verdier er gitt, antas den manglende forskyvningen å være null:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Fire verdier

En syntaks med fire verdier lar deg spesifisere hvilke sider av elementet du plasserer masken i forhold til (verdiene 1 og 3), og deretter avstanden fra disse sidene (verdiene 2 og 4).

Så hvis du vil plassere masken 100px fra bunnen av elementet og 200px fra høyre, kan du gjøre som følger:

mask-position: bottom 100px right 200px;

Animasjonsmasker

Det er mulig å animere maskeposisjon og mask-sizebruke keyframe-animasjon og CSS-overgang, som følgende:

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

I denne neste demo animerer vi posisjonen til maskelaget ved hjelp av keyframe-animasjon:

Demo

Endre verdien for mask-positioni følgende demo:

Nettleserstøtte

DVS Kant Firefox Chrome Safari Opera
Nei 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Android-nettleser iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Kilde: caniuse

Mer informasjon

  • CSS Masking Module Level 1 (Editor's Draft)
  • Klipping og maskering i CSS
  • Klipping mot maskering: Når skal du bruke hver
  • # 185: Spiller med CSS-masker (video)