Masca-origine - CSS-Tricks | Almanah CSS 2025

Specifică mask-originzona de poziție a măștii unei imagini a stratului de mască. Cu alte cuvinte, definește unde este originea imaginii stratului de mască, fie că este vorba de marginea chenarului, căptușeala sau caseta de conținut.

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

Pentru elementele redate ca o singură casetă, mask-originspecifică zona de poziționare a măștii. Pentru elementele redate ca mai multe casete (de exemplu, casete inline pe mai multe linii, casete pe mai multe pagini) proprietatea specifică ce casete box-decoration-breakfuncționează pentru a determina zona de poziționare a măștii.

Această proprietate funcționează ca background-originproprietatea, cu excepția faptului că are o valoare inițială diferită și trei valori suplimentare care se aplică elementelor SVG.

În următoarea demonstrație puteți schimba originea imaginii stratului de mască. Există aceeași imagine dedesubt pentru a arăta efectul de a masca mai bine și de a marca marginea și zonele de căptușire:

Sintaxă

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

Valoarea initiala: border-box
Se aplică la: Toate elementele. În SVG, se aplică elementelor containerului, cu excepția elementului, a tuturor elementelor grafice și a elementului.
Moștenit: nu
Tipul de animație: discret

Valori

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

Definiții de valoare

content-box: Poziția este relativă la caseta de conținut. Originea aparatului mask-imageeste poziționată în colțul din stânga sus al marginii conținutului.
padding-box: Poziția este relativă la cutia de umplere. Originea imaginii măștii 0 0este poziționată în colțul din stânga sus al marginii de umplere, 100% 100%este colțul din dreapta jos.
border-box: Valoarea implicită, care setează poziția în raport cu caseta de margine.
margin-box: Poziția este relativă la caseta de marjă
fill-box: Poziția este relativă la caseta de delimitare a obiectului
stroke-box: Poziția este relativă la caseta de limitare a cursei
view-box: Folosește cea mai apropiată fereastră SVG ca casetă de referință. Dacă viewBoxeste specificat un atribut pentru elementul de creare a portului de vizualizare SVG, atunci caseta de referință este poziționată la originea sistemului de coordonate stabilit de viewBoxatribut, iar dimensiunea casetei de referință este setată la widthși heightvalorile viewBoxatributului.
initial: Aplică setarea implicită a proprietății, care esteborder-box
inherit: Adoptă mask-originvaloarea părintelui.
unset: Elimină curentul mask-origindin element.

Folosind valori multiple

Această proprietate poate lua o listă de valori separate prin virgulă pentru originile măștii, unde fiecare valoare este aplicată unei imagini de strat de mască corespunzătoare specificată în mask-imageproprietate. În exemplul următor, prima valoare specifică originea primei imagini, a doua valoare specifică originea celei de-a doua imagini și așa mai departe.

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

Note

Pentru elementele SVG fără asociate caseta de aspect CSS, valorile content-box, padding-boxși border-boxCompute la fill-box.
Pentru elementele cu caseta asociate CSS aspect, valorile fill-box, stroke-boxși view-boxCompute la initialvaloarea mask-origin, care este border-box.

Demo

Când repetăm imaginea stratului de mască, prima instanță este poziționată în colțul din stânga sus al zonei de poziționare specificate și apoi se repetă începând de acolo în funcție de valoarea mask-repeatproprietății.

Schimbați valoarea pentru mask-originurmătoarea demonstrație pentru a vă face o idee mai bună despre ceea ce se întâmplă: