Maske-opprinnelse - CSS-triks | CSS-almanakk 2025

Den mask-originspesifiserer masken stillingsområde av en maske laget bilde. Med andre ord definerer den hvor opprinnelsen til maskeringslaget er, enten det er kanten av kanten, polstringen eller innholdsboksen.

.element ( mask-image: url(star.svg); mask-origin: content-box; )

For elementer gjengitt som en enkelt boks, mask-originspesifiserer maskeposisjoneringsområdet. For elementer gjengitt som flere bokser (f.eks. Innebygde bokser på flere linjer, bokser på flere sider) spesifiserer egenskapen hvilke bokser som skal box-decoration-breakfungere for å bestemme maskeposisjoneringsområdet.

Denne egenskapen fungerer som background-originegenskapen, bortsett fra at den har annen startverdi og tre tilleggsverdier som gjelder SVG-elementer.

I den følgende demoen kan du endre opprinnelsen til maskeringsbildet. Det er det samme bildet under for å vise effekten av å maskere bedre og markere kant- og polstringsområdene:

Syntaks

mask-origin: = content-box | padding-box | border-box | margin-box | fill-box | stroke-box | view-box

Opprinnelig verdi: border-box
Gjelder: Alle elementer. I SVG gjelder det containerelementer unntatt elementet, alle grafikkelementer og elementet.
Arvet: nei
Animasjonstype: diskret

Verdier

/* Keywords */ mask-origin: content-box; mask-origin: padding-box; mask-origin: border-box; mask-origin: margin-box; mask-origin: fill-box; mask-origin: stroke-box; mask-origin: view-box;   /* Global values */ mask-origin: intial; mask-origin: inherit; mask-origin: unset;

Verdidefinisjoner

content-box: Posisjonen er relativt til innholdsboksen. Opprinnelsen til mask-imageer plassert øverst til venstre i innholdskanten.
padding-box: Posisjonen er relativt til polstringsboksen. Opprinnelsen til maskebildet ved 0 0er plassert øverst til venstre på polstringskanten, 100% 100%er det nederste høyre hjørnet.
border-box: Standardverdien, som angir posisjonen i forhold til kantboksen.
margin-box: Posisjonen er relativt til margboks
fill-box: Posisjonen er i forhold til objektets avgrensningsboks
stroke-box: Posisjonen er i forhold til strekbegrensningsboksen
view-box: Bruker nærmeste SVG-visningsport som referanse. Hvis et viewBoxattributt er spesifisert for SVG-visningsportopprettingselementet, blir referanseboksen plassert ved opprinnelsen til koordinatsystemet som er opprettet av viewBoxattributtet, og dimensjonen til referanseboksen blir satt til widthog heightverdiene til viewBoxattributtet.
initial: Bruker egenskapens standardinnstilling, som erborder-box
inherit: Vedtar mask-originverdien av foreldrene.
unset: Fjerner strømmen mask-originfra elementet.

Bruke flere verdier

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

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-origin: padding-box, border-box, content-box; )

Merknader

For SVG elementer uten tilhørende CSS-layout-boksen verdiene content-box, padding-boxog border-boxberegne å fill-box.
For elementer med tilhørende CSS-layout-boksen verdiene fill-box, stroke-boxog view-boxberegne til initialverdien av mask-origin, som er border-box.

Demo

Når vi får gjentatt maskeringsbildet, blir den første forekomsten plassert øverst til venstre i det angitte posisjoneringsområdet, og deretter gjentas den med start derfra i henhold til verdien på mask-repeateiendommen.

Endre verdien for mask-origini følgende demo for å få et bedre inntrykk av hva som skjer: