Izvor iz maske - CSS-triki | Almanah CSS 2025

mask-originDoloča položaj masko območje masko plasti posnetka. Z drugimi besedami, določa, kje je izvor slike maske, ne glede na to, ali gre za rob obrobe, oblazinjenje ali vsebinsko polje.

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

Za elemente, upodobljene kot eno polje, mask-origindoloča območje pozicioniranja maske. Za elemente, upodobljene kot več polj (npr. Vrstice v več vrsticah, polja na več straneh), lastnost določa, katera polja box-decoration-breakdelujejo, da določijo območje pozicioniranja maske.

Ta lastnost deluje kot background-originlastnost, le da ima drugačno začetno vrednost in tri dodatne vrednosti, ki veljajo za elemente SVG.

V naslednji predstavitvi lahko spremenite izvor slike maske. Spodaj je ista slika, ki prikazuje učinek boljšega prikrivanja in označevanja meja in oblazinjenja:

Sintaksa

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

Začetna vrednost: border-box
Velja za: Vsi elementi. V SVG velja za elemente vsebnika, razen elementa, vseh grafičnih elementov in elementa.
Podedovano: ne
Vrsta animacije: diskretna

Vrednote

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

Opredelitve vrednosti

content-box: Položaj je glede na polje z vsebino. Izvor datoteke mask-imageje nameščen v zgornjem levem kotu roba vsebine.
padding-box: Položaj je glede na polnilo. Izvor slike maske 0 0je postavljen v zgornjem levem kotu oblazinjenega roba, 100% 100%v spodnjem desnem kotu.
border-box: Privzeta vrednost, ki nastavi položaj glede na obrobo.
margin-box: Položaj je glede na polje z robom
fill-box: Položaj je glede na polje, ki omejuje predmet
stroke-box: Položaj je glede na omejevalno polje
view-box: Za referenčno polje uporabi najbližji pogled SVG. Če je viewBoxatribut podan za element za ustvarjanje vidnega polja SVG, je referenčno polje postavljeno na izvor koordinatnega sistema, ki ga določa viewBoxatribut, in dimenzija referenčnega polja je nastavljena na widthin heightvrednosti viewBoxatributa.
initial: Uporabi privzeto nastavitev lastnosti, ki jeborder-box
inherit: Sprejme mask-originvrednost nadrejenega.
unset: Odstrani tok mask-originiz elementa.

Uporaba več vrednosti

Ta lastnost lahko sprejme seznam vrednosti, ločenih z vejico, za izvor maske, kjer se vsaka vrednost uporabi za ustrezno sliko sloja maske, določeno v mask-imagelastnosti. V naslednjem primeru prva vrednost določa izvor prve slike, druga vrednost določa izvor druge slike itd.

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

Opombe

Za SVG elementov brez pridruženih postavitve CSS box, vrednot content-box, padding-boxin border-boxcompute do fill-box.
Za elemente z layout polju pridruženih CSS, vrednot fill-box, stroke-boxin view-boxcompute na initialvrednosti mask-origin, kar je border-box.

Demo

Ko ponovimo sliko sloja maske, je prvi primerek nameščen v zgornjem levem kotu določenega območja pozicioniranja, nato pa se ponovi, začenši od tam glede na vrednost mask-repeatlastnosti.

Spremenite vrednost za mask-originnaslednjo predstavitev, da boste bolje razumeli, kaj se dogaja: