Mask-ursprung - CSS-tricks | CSS Almanack 2025

Den mask-originanger maskläget område ett maskeringslager image. Med andra ord definierar den var ursprunget till masklagrets bild är, oavsett om det är kanten på kanten, vadderingen eller innehållsrutan.

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

För element som återges som en enda ruta, mask-originspecificeras maskens positioneringsområde. För element som återges som flera rutor (t.ex. inbyggda rutor på flera rader, rutor på flera sidor) anger egenskapen vilka rutor som box-decoration-breakfungerar för att bestämma maskpositioneringsområdet.

Den här egenskapen fungerar som background-originegenskapen, förutom att den har olika initialvärden och ytterligare tre värden som gäller SVG-element.

I följande demo kan du ändra ursprunget till masklagrets bild. Det finns samma bild under för att visa effekten av att maskera bättre och markera kant- och stoppningsområdena:

Syntax

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

Ursprungligt värde: border-box
Gäller för: Alla element. I SVG gäller det containerelement exklusive elementet, alla grafikelement och elementet.
Ärvt: nej
Animationstyp: diskret

Värden

/* 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ärdedefinitioner

content-box: Positionen är relativt innehållsrutan. Ursprunget till mask-imageär placerat i det övre vänstra hörnet av innehållskanten.
padding-box: Positionen är relativt stoppningslådan. Maskebildens ursprung vid 0 0är placerat i det övre vänstra hörnet av stoppningskanten, 100% 100%är det nedre högra hörnet.
border-box: Standardvärdet, som ställer in positionen relativt gränsrutan.
margin-box: Positionen är relativt marginalrutan
fill-box: Positionen är i förhållande till objektgränsrutan
stroke-box: Positionen är relativt slaget
view-box: Använder närmaste SVG-visningsport som referensruta. Om ett viewBoxattribut specificeras för SVG-visningsportskapande element placeras referensrutan vid koordinatsystemets ursprung som fastställts av viewBoxattributet och dimensionen för referensrutan ställs in till widthoch heightvärdena för viewBoxattributet.
initial: Tillämpar egenskapens standardinställning, vilket ärborder-box
inherit: Antar mask-originvärdet på föräldern.
unset: Tar bort strömmen mask-originfrån elementet.

Använda flera värden

Den här egenskapen kan ta en kommaseparerad lista med värden för maskursprung, där varje värde tillämpas på en motsvarande masklagerbild som anges i mask-imageegenskapen. I följande exempel anger det första värdet ursprunget till den första bilden, det andra värdet anger den andra bildens ursprung och så vidare.

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

Anteckningar

För SVG element utan tillhörande CSS-layout box värdena content-box, padding-boxoch border-boxcompute till fill-box.
För element med tillhörande CSS-layout rutan, de värden fill-box, stroke-boxoch view-boxcompute till initialvärdet av mask-origin, vilket är border-box.

Demo

När vi får maskskiktsbilden upprepas, placeras den första instansen i det övre vänstra hörnet av det angivna positioneringsområdet, och sedan upprepas den med början därifrån enligt mask-repeategenskapens värde .

Ändra värdet för mask-origini följande demo för att få en bättre uppfattning om vad som händer: