Pochodzenie maski - CSS-Tricks

mask-originOkreśla położenie obszaru maski z maską warstwy obrazu. Innymi słowy, określa, skąd pochodzi obraz warstwy maski, czy jest to krawędź obramowania, dopełnienie czy pole zawartości.

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

W przypadku elementów renderowanych jako pojedyncza ramka mask-originokreśla obszar pozycjonowania maski. W przypadku elementów renderowanych jako wiele ramek (np. Ramki w kilku wierszach, ramki na kilku stronach) właściwość określa, na których ramkach box-decoration-breakdziałają, aby określić obszar pozycjonowania maski.

Ta właściwość działa podobnie jak background-originwłaściwość, z tą różnicą, że ma inną wartość początkową i trzy dodatkowe wartości, które mają zastosowanie do elementów SVG.

W poniższym demo możesz zmienić pochodzenie obrazu warstwy maskującej. Poniżej znajduje się ten sam obraz, aby pokazać efekt lepszego maskowania i zaznaczania granic i obszarów wypełnienia:

Składnia

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

Wartość początkowa: border-box
Dotyczy: wszystkich elementów. W SVG dotyczy to elementów kontenera z wyłączeniem elementu, wszystkich elementów graficznych i elementu.
Odziedziczone: nie
Typ animacji: dyskretna

Wartości

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

Definicje wartości

content-box: Pozycja jest określana względem pola treści. Początek mask-imagejest umieszczony w lewym górnym rogu krawędzi zawartości.
padding-box: Pozycja odnosi się do pola wypełnienia. Początek obrazu maski 0 0jest umieszczony w lewym górnym rogu krawędzi wypełnienia, 100% 100%to prawy dolny róg.
border-box: Wartość domyślna, która określa położenie względem ramki granicznej.
margin-box: Pozycja jest określana względem pola marginesu
fill-box: Pozycja jest określona względem obwiedni obiektu
stroke-box: Pozycja jest określona względem obrysu obrysu
view-box: Wykorzystuje najbliższą rzutnię SVG jako ramkę odniesienia. Jeśli viewBoxatrybut jest określony dla elementu tworzącego rzutnię SVG, wówczas ramka odniesienia jest umieszczana na początku układu współrzędnych ustalonego przez viewBoxatrybut, a wymiar ramki odniesienia jest ustawiany na wartości widthi atrybutu.heightviewBox
initial: Stosuje domyślne ustawienie właściwości, czyliborder-box
inherit: Przyjmuje mask-originwartość rodzica.
unset: Usuwa prąd mask-originz elementu.

Używanie wielu wartości

Ta właściwość może przyjmować listę wartości oddzielonych przecinkami dla początków maski, gdzie każda wartość jest stosowana do odpowiedniego obrazu warstwy maski określonego we mask-imagewłaściwości. W poniższym przykładzie pierwsza wartość określa pochodzenie pierwszego obrazu, druga wartość określa pochodzenie drugiego obrazu i tak dalej.

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

Uwagi

Dla elementów SVG bez obecności polu układu CSS, wartości content-box, padding-boxi border-boxobliczeniowych do fill-box.
Dla elementów z pudełkiem Associated CSS układu, wartości fill-box, stroke-boxi view-boxobliczeniowych do initialwartości mask-origin, która jest border-box.

Próbny

Kiedy mamy powtórzony obraz warstwy maski, pierwsza instancja jest umieszczana w lewym górnym rogu określonego obszaru pozycjonowania, a następnie jest powtarzana, zaczynając od tego, zgodnie z wartością mask-repeatwłaściwości.

Zmień wartość dla mask-originw poniższym demo, aby uzyskać lepszy obraz tego, co się dzieje: