Pôvod masky - Triky CSS | Almanach CSS 2025

mask-originUrčuje pozíciu plochu masky z obrazu masky vrstvy. Inými slovami, definuje, kde je pôvod obrazu maskovej vrstvy, či už ide o okraj ohraničenia, výplň alebo rámček s obsahom.

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

Pre prvky vykreslené ako jedno políčko mask-originurčuje oblasť umiestnenia masky. Pre prvky vykreslené ako viac políčok (napr. Vložené polia na niekoľkých riadkoch, polia na niekoľkých stránkach) určuje vlastnosť, na ktoré polia sa bude box-decoration-breakpracovať s určením oblasti umiestnenia masky.

Táto vlastnosť funguje ako background-originvlastnosť, ibaže má inú počiatočnú hodnotu a tri ďalšie hodnoty, ktoré sa vzťahujú na prvky SVG.

V nasledujúcej ukážke môžete zmeniť pôvod obrázka vrstvy masky. Pod obrázkom je rovnaký obrázok, ktorý lepšie zobrazuje efekt maskovania a označenie okrajov a polstrovaných oblastí:

Syntax

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

Pôvodná hodnota: border-box
Platí pre: Všetky prvky. V SVG sa vzťahuje na prvky kontajnera s výnimkou prvku, všetkých grafických prvkov a prvku.
Zdedené: č
Typ animácie: diskrétna

Hodnoty

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

Definície hodnoty

content-box: Poloha je relatívna k poli obsahu. Počiatok zdroja mask-imageje umiestnený v ľavom hornom rohu okraja obsahu.
padding-box: Poloha je relatívna k polstrovaniu. Počiatočný obrázok masky 0 0je umiestnený v ľavom hornom rohu okraja výplne, 100% 100%tj v pravom dolnom rohu.
border-box: Predvolená hodnota, ktorá nastavuje pozíciu vzhľadom k orámovaniu.
margin-box: Poloha je relatívna k okrajovému oknu
fill-box: Poloha je relatívna k ohraničovaciemu boxu objektu
stroke-box: Poloha je relatívna k ohraničovaciemu rámu ťahu
view-box: Ako referenčné pole použije najbližší výrez SVG. Ak viewBoxje atribút určená pre SVG výrezu vytváranie prvku potom je referenčná poľa je umiestnený v počiatku súradnicového systému zavedeného viewBoxatribútu a rozmeru referenčného poľa je nastavená na widtha heighthodnôt viewBoxatribútu.
initial: Použije predvolené nastavenie vlastnosti, ktoré jeborder-box
inherit: Prijme mask-originhodnotu rodiča.
unset: Odstráni prúd mask-originz prvku.

Použitie viacerých hodnôt

Táto vlastnosť môže mať pôvod hodnôt masiek oddelený čiarkami, kde sa každá hodnota použije na zodpovedajúci obrázok vrstvy masky uvedený vo mask-imagevlastnosti. V nasledujúcom príklade prvá hodnota určuje pôvod prvého obrázka, druhá hodnota určuje pôvod druhého obrázka atď.

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

Poznámky

Pre SVG prvky pripojenými rozvrhnutie CSS pole hodnôt content-box, padding-boxa border-boxvýpočtovo do fill-box.
U prvkov s pridruženými CSS rozloženie poľa hodnôt fill-box, stroke-boxa view-boxvýpočtovo na initialhodnotu mask-origin, ktorá je border-box.

Ukážka

Keď máme obraz maskovej vrstvy opakovaný, prvá inštancia je umiestnená v ľavom hornom rohu určenej pozičnej oblasti a potom sa opakuje počnúc odtiaľ podľa hodnoty mask-repeatvlastnosti.

Zmeňte hodnotu položky mask-originv nasledujúcej ukážke, aby ste mali lepšiu predstavu o tom, čo sa deje: