Mask-päritolu - CSS-trikid | CSS-i almanahh 2025

mask-originTäpsustatakse mask asendis pindala Maskikiht pilti. Teisisõnu määratleb see, kus asub maskikihi kujutise päritolu, olgu see siis ääre, polstri või sisukasti serv.

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

Ühe kastina renderdatud elementide jaoks mask-originmäärab maski positsioneerimisala. Mitme kastina renderdatud elementide (nt mitme rea sisseehitatud kastid, mitmel lehel olevad kastid) puhul täpsustab omadus, millised kastid box-decoration-breaktoimivad maski positsioneerimisala määramiseks.

See atribuut töötab nagu background-originatribuut, ainult et sellel on erinev algväärtus ja kolm täiendavat väärtust, mis kehtivad SVG elementidele.

Järgmises demos saate muuta maskikihi pildi päritolu. Parema maskeerimise ning ääre- ja polsterdusalade tähistamise efekti näitamiseks on all sama pilt.

Süntaks

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

Algne väärtus: border-box
Kehtib kõigi elementide kohta. SVG-s kehtib see konteinerelementidele, välja arvatud element, kõik graafilised elemendid ja element.
Päritud: ei
Animatsiooni tüüp: diskreetne

Väärtused

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

Väärtuste definitsioonid

content-box: Asukoht on sisukasti suhtes. Algus mask-imageon paigutatud sisuserva vasakusse ülanurka.
padding-box: Asend on polsterduskarbi suhtes. Maskipildi alguspunkt 0 0asub polsterdusserva vasakus ülanurgas, see 100% 100%on paremas alanurgas.
border-box: Vaikeväärtus, mis määrab asukoha piirikarbi suhtes.
margin-box: Positsioon on veerise suhtes
fill-box: Asukoht on objekti piirava kasti suhtes
stroke-box: Asend on käigu piiramise kasti suhtes
view-box: Kasutab viitekastina lähimat SVG vaateava. Kui viewBoxSVG-i vaateava loomise elemendile on määratud atribuut, siis viitenurk asetatakse viewBoxatribuudiga loodud koordinaatsüsteemi alguspunkti juurde ja võrdluskasti mõõt on määratud atribuudi widthja heightväärtustega viewBox.
initial: Rakendab atribuudi vaikesätet, mis onborder-box
inherit: Võtab vastu mask-originvanema väärtuse.
unset: Eemaldab voolu mask-originelemendist.

Mitme väärtuse kasutamine

See omadus võib võtta komaga eraldatud väärtuste loendi maski päritolu kohta, kus iga väärtus rakendatakse mask-imageatribuudis määratletud vastava maskikihi kujutisele . Järgmises näites määrab esimene väärtus esimese pildi päritolu, teine väärtus - teise pildi päritolu jne.

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

Märkused

Sest SVG elemente ilma seotud CSS paigutust kasti, väärtusi content-box, padding-boxja border-boxarvutama, et fill-box.
Elementide kaasatud CSS paigutust kasti, väärtusi fill-box, stroke-boxja view-boxarvutama, et initialväärtus mask-origin, mis on border-box.

Demo

Kui me laseme maskikihi pilti korrata, asetatakse esimene eksemplar määratud positsioneerimisala vasakusse ülanurka ja seejärel korratakse seda sealt alates mask-repeatatribuudi väärtusest .

mask-originToimuva kohta parema ülevaate saamiseks muutke järgmise demo väärtust :