Maskeoprindelse - CSS-tricks | CSS Almanak 2025

Det mask-originangiver maskepositionsområdet for et maskerlagsbillede. Med andre ord definerer det, hvor oprindelsen til maskerlagsbilledet er, om det er kanten af kanten, polstringen eller indholdsboksen.

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

For elementer, der gengives som en enkelt boks, mask-originangives maskepositioneringsområdet. For elementer gengivet som flere felter (f.eks. Indbyggede felter på flere linjer, felter på flere sider) specificerer egenskaben hvilke felter der box-decoration-breakfungerer for at bestemme maskepositioneringsområdet.

Denne egenskab fungerer som background-originejendommen, bortset fra at den har en anden startværdi og tre yderligere værdier, der gælder for SVG-elementer.

I den følgende demo kan du ændre oprindelsen af maskerlagsbilledet. Der er det samme billede nedenunder for at vise effekten af at maskere bedre og markere kant- og polstringsområderne:

Syntaks

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

Startværdi: border-box
Gælder for: Alle elementer. I SVG gælder det for containerelementer eksklusive elementet, alle grafiske elementer og elementet.
Arvet: nej
Animationstype: diskret

Værdier

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

Værdidefinitioner

content-box: Positionen er i forhold til indholdsfeltet. Oprindelsen til det mask-imageer placeret i det øverste venstre hjørne af indholdskanten.
padding-box: Positionen er i forhold til polstringsboksen. Oprindelsen til maskebilledet ved 0 0er placeret i det øverste venstre hjørne af polstringskanten, 100% 100%er det nederste højre hjørne.
border-box: Standardværdien, der indstiller positionen i forhold til kantboksen.
margin-box: Positionen er i forhold til margenboksen
fill-box: Positionen er i forhold til objektets afgrænsningsfelt
stroke-box: Positionen er i forhold til stregafgrænsningsboksen
view-box: Bruger den nærmeste SVG-visningsport som referenceboks. Hvis viewBoxder er angivet en attribut for SVG-visningsportoprettelseselementet, placeres referenceboksen ved oprindelsen til koordinatsystemet, der er oprettet af viewBoxattributten, og referencefeltets dimension indstilles til attributten widthog heightværdierne viewBox.
initial: Anvender egenskabens standardindstilling, som erborder-box
inherit: Vedtager mask-originværdien af den overordnede.
unset: Fjerner strømmen mask-originfra elementet.

Brug af flere værdier

Denne egenskab kan tage en komma-adskilt liste over værdier for maskeoprindelse, hvor hver værdi anvendes på et tilsvarende maskerlagsbillede, der er angivet i mask-imageegenskaben. I det følgende eksempel angiver den første værdi oprindelsen af det første billede, den anden værdi angiver oprindelsen af det andet billede osv.

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

Bemærkninger

For SVG elementer uden associeret CSS layout kasse, værdierne content-box, padding-boxog border-boxcompute til fill-box.
For elementer med tilhørende CSS layout kasse, værdierne fill-box, stroke-boxog view-boxcompute til initialværdien af mask-origin, som er border-box.

Demo

Når vi får maskelagbilledet gentaget, placeres den første forekomst i øverste venstre hjørne af det angivne placeringsområde, og derefter gentages det startende derfra i henhold til mask-repeatejendommens værdi .

Skift værdien for mask-origini følgende demo for at få en bedre idé om, hvad der sker: