Původ masky - Triky CSS | Almanach CSS 2025

mask-originUrčuje pozici plochu masky z obrazu masky vrstvy. Jinými slovy definuje, kde je původ obrazu vrstvy masky, ať už je to okraj ohraničení, výplň nebo pole obsahu.

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

U prvků vykreslených jako jeden rámeček mask-originurčuje oblast umístění masky. U prvků vykreslených jako více rámečků (např. Vložené rámečky na několika řádcích, rámečky na několika stránkách) určuje vlastnost, na které rámečky box-decoration-breakpůsobí, aby určila oblast umístění masky.

Tato vlastnost funguje jako background-originvlastnost, kromě toho, že má jinou počáteční hodnotu a tři další hodnoty, které platí pro prvky SVG.

V následující ukázce můžete změnit původ obrazu vrstvy masky. Stejný obrázek je dole, aby se lépe zobrazil efekt maskování a označení okrajů a vycpávek:

Syntax

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

Počáteční hodnota: border-box
Platí pro: Všechny prvky. V SVG platí pro elementy kontejneru s výjimkou elementu, všech grafických elementů a elementu.
Zděděno: ne
Typ animace: diskrétní

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;

Definice hodnot

content-box: Poloha je relativní k poli obsahu. Počátek mask-imageje umístěn v levém horním rohu okraje obsahu.
padding-box: Poloha je relativní k polstrování. Počátek obrazu masky v 0 0je umístěn v levém horním rohu okraje výplně, 100% 100%je pravý dolní roh.
border-box: Výchozí hodnota, která nastavuje polohu vzhledem k rámečku ohraničení.
margin-box: Poloha je relativní k okraji pole
fill-box: Poloha je relativní k ohraničujícímu rámečku objektu
stroke-box: Poloha je relativní k orámování tahu
view-box: Jako referenční pole použije nejbližší výřez SVG. Pokud viewBoxje atribut určena pro SVG výřezu vytváření prvku pak je referenční pole je umístěn v počátku souřadného systému zavedeného viewBoxatributu a rozměru referenčního pole je nastavena na widtha heighthodnot viewBoxatributu.
initial: Použije výchozí nastavení vlastnosti, což jeborder-box
inherit: Přijme mask-originhodnotu nadřazeného objektu.
unset: Odstraní proud mask-originz prvku.

Použití více hodnot

Tato vlastnost může převzít čárkami oddělený seznam hodnot pro počátky masky, kde se každá hodnota použije na odpovídající obrázek vrstvy masky zadaný ve mask-imagevlastnosti. V následujícím příkladu určuje první hodnota původ prvního obrázku, druhá hodnota určuje původ druhého obrázku atd.

.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

Pro SVG prvky připojenými rozvržení CSS pole hodnot content-box, padding-boxa border-boxvýpočetně do fill-box.
U prvků s přidruženými CSS rozložení pole hodnot fill-box, stroke-boxa view-boxvýpočetně na initialhodnotu mask-origin, která je border-box.

Ukázka

Když máme obrázek vrstvy masky opakovaný, je první instance umístěna v levém horním rohu zadané polohovací oblasti a poté se opakuje počínaje odtud podle hodnoty mask-repeatvlastnosti.

Změňte hodnotu pro mask-originv následující ukázce, abyste získali lepší představu o tom, co se děje: