Naamio-alkuperä - CSS-temppuja | CSS-almanakka 2025

mask-originMäärittää maski asema alueella maskikerros kuva. Toisin sanoen se määrittää, missä maskikerroksen kuvan alkuperä on, olipa kyse reunan reunasta, täytteestä tai sisältökentästä.

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

Yksittäisenä laatikkona renderoiduille elementeille mask-originmäärittää maskin sijoitusalueen. Elementteinä, jotka on renderoitu useiksi laatikoiksi (esim. Inline-ruudut useille riveille, laatikot useille sivuille), ominaisuus määrittää, mitkä ruudut box-decoration-breaktoimivat maskin sijoitusalueen määrittämiseksi.

Tämä ominaisuus toimii kuten background-originominaisuus, paitsi että sillä on erilainen alkuarvo ja kolme lisäarvoa, jotka koskevat SVG-elementtejä.

Seuraavassa esittelyssä voit muuttaa maskikerroksen kuvan alkuperän. Alla on sama kuva, joka näyttää paremman naamioinnin ja reunan ja pehmustealueiden merkityksen:

Syntaksi

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

Alkuarvo: border-box
Koskee kaikkia elementtejä. SVG: ssä se koskee konttielementtejä, lukuun ottamatta elementtiä, kaikkia grafiikkaelementtejä ja elementtiä.
Peritty: ei
Animaation tyyppi: erillinen

Arvot

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

Arvomääritelmät

content-box: Sijainti on suhteessa sisältöruutuun. Alkuperä mask-imageon sijoitettu sisällön reunan vasempaan yläkulmaan.
padding-box: Asento on suhteessa pehmustekoteloon. Naamion kuvan alkuperä kohdassa 0 0, joka sijaitsee pehmusteen reunan vasemmassa yläkulmassa, 100% 100%on oikea alakulma.
border-box: Oletusarvo, joka määrittää sijainnin suhteessa reunaruutuun.
margin-box: Sijainti on suhteessa marginaaliruutuun
fill-box: Sijainti on suhteessa objektia rajoittavaan ruutuun
stroke-box: Asento on suhteessa iskunrajoituskoteloon
view-box: Käyttää lähintä SVG-näkymää vertailuruutuna. Jos viewBoxSVG-näkymän luontielementille määritetään määritte, referenssikenttä sijoitetaan viewBoxattribuutin muodostaman koordinaattijärjestelmän alkupisteeseen ja viitekentän ulottuvuus asetetaan attribuutin widthja heightarvoihin viewBox.
initial: Asettaa kiinteistön oletusasetuksen, joka onborder-box
inherit: Hyväksyy mask-originvanhemman arvon.
unset: Poistaa virran mask-originelementistä.

Useiden arvojen käyttö

Tämä ominaisuus voi ottaa pilkulla erotetun arvoluettelon peitteen alkuperälle, jossa kukin arvo lisätään vastaavaan mask-imageominaisuudessa määritettyyn maskikerroksen kuvaan . Seuraavassa esimerkissä ensimmäinen arvo määrittää ensimmäisen kuvan alkuperän, toinen arvo määrittää toisen kuvan alkuperän ja niin edelleen.

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

Huomautuksia

SVG elementtejä mahdollisesti siihen liittyvä CSS layout ruutuun arvoja content-box, padding-boxja border-boxCompute fill-box.
Elementtien niihin liittyvien CSS layout laatikko, arvot fill-box, stroke-boxja view-boxlaskea sen initialarvo mask-origin, joka on border-box.

Demo

Kun maskikerroksen kuva toistetaan, ensimmäinen esiintymä sijoitetaan määritetyn paikoitusalueen vasempaan yläkulmaan ja sitten se toistetaan sieltä alkaen mask-repeatominaisuuden arvon mukaan .

Muuta mask-originseuraavan esittelyn arvoa saadaksesi paremman käsityksen siitä, mitä tapahtuu: