Masker-oorsprong - CSS-trucs | CSS Almanac 2025

De mask-originspecificeert het maskerpositiegebied van een maskerlaagafbeelding. Met andere woorden, het definieert waar de oorsprong van de maskerlaagafbeelding is, of het nu de rand van de rand, opvulling of inhoudskader is.

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

mask-originSpecificeert het maskerpositioneringsgebied voor elementen die worden weergegeven als een enkel vak . Voor elementen die worden weergegeven als meerdere kaders (bijv. Inline kaders op meerdere regels, kaders op meerdere pagina's) specificeert de eigenschap welke kaders box-decoration-breakwerken om het maskerpositioneringsgebied te bepalen.

Deze eigenschap werkt net als de background-origineigenschap, behalve dat deze een andere beginwaarde heeft en drie extra waarden die van toepassing zijn op SVG-elementen.

In de volgende demo kunt u de oorsprong van de maskerlaagafbeelding wijzigen. Er is dezelfde afbeelding hieronder om het effect van beter maskeren en het markeren van de rand en opvulgebieden te laten zien:

Syntaxis

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

Beginwaarde: border-box
Van toepassing op: alle elementen. In SVG is het van toepassing op containerelementen met uitzondering van het element, alle grafische elementen en het element.
Overgenomen: nee
Animatietype: discreet

Waarden

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

Waarde definities

content-box De oorsprong van de mask-imagewordt in de linkerbovenhoek van de inhoudsrand geplaatst.
padding-box: De positie is relatief ten opzichte van de opvulbox. De oorsprong van het maskerbeeld 0 0bevindt zich in de linkerbovenhoek van de opvulrand, 100% 100%is de rechteronderhoek.
border-box: De standaardwaarde die de positie ten opzichte van het kader bepaalt.
margin-box: De positie is relatief ten opzichte van het margevak
fill-box: De positie is relatief ten opzichte van het objectgrenzenvak
stroke-box: De positie is relatief ten opzichte van het omtrekvak
view-box: Gebruikt de dichtstbijzijnde SVG-viewport als referentievak. Als een viewBoxattribuut is gespecificeerd voor het aanmaakelement van het SVG-viewport, wordt het referentiekader gepositioneerd op de oorsprong van het coördinatensysteem dat is vastgesteld door het viewBoxattribuut en wordt de dimensie van het referentiekader ingesteld op de widthen heightwaarden van het viewBoxattribuut.
initialborder-box
inheritmask-origin
unsetmask-origin

Meerdere waarden gebruiken

Deze eigenschap kan een door komma's gescheiden lijst met waarden aannemen voor de oorsprong van een masker, waarbij elke waarde wordt toegepast op een corresponderende maskerlaagafbeelding die in de mask-imageeigenschap is gespecificeerd . In het volgende voorbeeld specificeert de eerste waarde de oorsprong van de eerste afbeelding, de tweede waarde specificeert de oorsprong van de tweede afbeelding, enzovoort.

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

Opmerkingen

Voor SVG-elementen zonder bijbehorende CSS-lay-out box, de waarden content-box, padding-boxen border-boxberekenen aan fill-box.
Voor elementen met bijbehorende CSS layout vak waarden fill-box, stroke-boxen view-boxberekenen de initialwaarde mask-origin, die is border-box.

Demo

Wanneer we de afbeelding van de maskerlaag laten herhalen, wordt de eerste instantie in de linkerbovenhoek van het gespecificeerde positioneringsgebied geplaatst, en vervolgens wordt deze vanaf daar herhaald volgens de waarde van de mask-repeateigenschap.

Verander de waarde voor mask-originin de volgende demo om een beter idee te krijgen van wat er gebeurt: