Maszk eredetű - CSS-trükkök

A mask-originmeghatározza a maszk helyzetét terület egy maszk réteg képet. Más szavakkal, meghatározza, hogy hol van a maszkréteg képének eredete, legyen az a szegély, a kitöltő vagy a tartalom mező széle.

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

Az egyetlen dobozként megjelenített elemeknél mask-originmegadja a maszk pozícionálási területét. A több dobozként rendelt elemek (pl. Több sorban lévő soros dobozok, több oldalon lévő dobozok) esetében a tulajdonság meghatározza, hogy mely mezők box-decoration-breakműködnek a maszk pozícionálási területének meghatározásához.

Ez a tulajdonság a background-origintulajdonsághoz hasonlóan működik , azzal a különbséggel, hogy eltér a kezdeti értéke és három további értéke, amelyek az SVG elemekre vonatkoznak.

A következő bemutatóban megváltoztathatja a maszk réteg kép eredetét. Ugyanaz a kép van alatta, amely megmutatja a jobb maszkolás, valamint a szegély és a párnázási területek jelölésének hatását:

Szintaxis

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

Kezdő érték: border-box
A következőkre vonatkozik: Minden elem. Az SVG-ben a konténerelemekre vonatkozik, kivéve az elemet, az összes grafikai elemet és az elemet.
Örökölt: nem
Animáció típusa: diszkrét

Értékek

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

Értékdefiníciók

content-box: A pozíció a tartalom mezőhöz viszonyítva. Az origó mask-imagea tartalom élének bal felső sarkában helyezkedik el.
padding-box: A helyzet a párnázó dobozhoz viszonyítva. A maszk kép origója 0 0a párnázási szél bal felső sarkában helyezkedik el, 100% 100%a jobb alsó sarok.
border-box: Az alapértelmezett érték, amely a szegélydobozhoz viszonyított pozíciót állítja be.
margin-box: A helyzet a margó mezőhöz viszonyítva
fill-box: A helyzet az objektumhatároló dobozhoz viszonyítva
stroke-box: A helyzet a lökethatároló dobozhoz viszonyítva
view-box: A legközelebbi SVG nézetablakot használja referenciamezőként. Ha egy viewBoxattribútum van megadva az SVG nézetablak létrehozó eleméhez, akkor a referenciamező az viewBoxattribútum által létrehozott koordináta-rendszer origójánál helyezkedik el, és a referenciamező dimenziója az attribútum widthés heightértékeire van állítva viewBox.
initial: A tulajdonság alapértelmezett beállítását alkalmazzaborder-box
inherit: Elfogadja mask-origina szülő értékét.
unset: Eltávolítja az áramot mask-originaz elemtől.

Több érték használata

Ez a tulajdonság vesszővel elválasztott értéklistát vehet fel a maszk eredetéhez, ahol az egyes értékeket a mask-imagetulajdonságban megadott megfelelő maszk réteg képre alkalmazzák . A következő példában az első érték meghatározza az első kép eredetét, a második érték a második kép eredetét stb.

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

Megjegyzések

SVG elemek nélkül kapcsolódó CSS elrendezés doboz, az értékek content-box, padding-boxés a border-boxcompute az fill-box.
Azokhoz az elemekhez, amelyekhez társított CSS elrendezési doboz tartozik, az értékeket fill-box, stroke-boxés view-boxszámolja ki az initialértékre mask-origin, amelyik border-box.

Demó

Amikor megismételjük a maszkréteg képét, az első példány a megadott pozicionálási terület bal felső sarkában helyezkedik el, majd onnan indul ki a mask-repeattulajdonság értéke szerint .

Változtassa meg a (z) értékét mask-origina következő bemutatóban, hogy jobb képet kapjon a történésekről: