Maskas izcelsme - CSS-triki | CSS almanahs 2025

Norāda mask-originmaskas slāņa attēla maskas pozīcijas laukumu. Citiem vārdiem sakot, tas nosaka, kur atrodas maskas slāņa attēla izcelsme, neatkarīgi no tā, vai tā ir apmales, polsterējuma vai satura lodziņa mala.

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

Elementiem, kas atveidoti kā viena lodziņš, mask-originnorāda maskas pozicionēšanas apgabalu. Elementiem, kas atveidoti kā vairākas lodziņi (piemēram, inline lodziņi uz vairākām rindām, rūtiņas uz vairākām lappusēm), rekvizīts norāda, kuras kastes box-decoration-breakdarbojas, lai noteiktu maskas pozicionēšanas apgabalu.

Šis īpašums darbojas tāpat kā background-originīpašums, izņemot to, ka tam ir atšķirīga sākotnējā vērtība un trīs papildu vērtības, kas attiecas uz SVG elementiem.

Šajā demo jūs varat mainīt maskas slāņa attēla izcelsmi. Zemāk ir viens un tas pats attēls, kas parāda labākas maskēšanas un apmales un polsterējuma zonu iezīmēšanas efektu:

Sintakse

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

Sākotnējā vērtība: border-box
Attiecas uz: visiem elementiem. SVG tas attiecas uz konteinera elementiem, izņemot elementu, visus grafiskos elementus un elementu.
Mantots: nē
Animācijas veids: diskrēts

Vērtības

/* 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ērtību definīcijas

content-box: Pozīcija ir attiecībā pret satura lodziņu. Sākuma zīme mask-imageir novietota satura malas augšējā kreisajā stūrī.
padding-box: Pozīcija ir salīdzināta ar polsterējuma kasti. Maskas attēla izcelsme, kas atrodas 0 0polsterējuma malas augšējā kreisajā stūrī, 100% 100%ir apakšējais labais stūris.
border-box: Noklusējuma vērtība, kas nosaka pozīciju attiecībā pret apmales lodziņu.
margin-box: Pozīcija ir attiecībā pret piemales lodziņu
fill-box: Pozīcija ir attiecībā pret objektu ierobežojošo lodziņu
stroke-box: Pozīcija ir attiecībā pret gājiena ierobežojošo kasti
view-box: Kā atsauces lodziņu izmanto tuvāko SVG skata punktu. Ja viewBoxSVG skatu porta izveides elementam ir norādīts atribūts, tad atsauces lodziņš tiek novietots viewBoxatribūta izveidotās koordinātu sistēmas sākumā, un atsauces lodziņa dimensija ir iestatīta uz atribūta widthun heightvērtībām viewBox.
initial: Piemēro īpašuma noklusējuma iestatījumu, kas irborder-box
inherit: Pieņem mask-originvecāku vērtību.
unset: Noņem strāvu mask-originno elementa.

Vairāku vērtību izmantošana

Šis rekvizīts var aizņemt komatu atdalītu vērtību sarakstu masku izcelsmei, kur katra vērtība tiek piemērota attiecīgajam mask-imagerekvizītā norādītajam maskas slāņa attēlam . Šajā piemērā pirmā vērtība norāda pirmā attēla izcelsmi, otrā vērtība norāda otrā attēla izcelsmi utt.

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

Piezīmes

Par SVG elementiem bez saistītajā CSS izkārtojumu kaste, vērtības content-box, padding-boxun border-boxcompute līdz fill-box.
Par elementiem ar saistīto CSS izkārtojumu kaste, vērtības fill-box, stroke-boxun view-boxskaitļošanas uz initialvērtību mask-origin, kas ir border-box.

Demonstrācija

Kad maskas slāņa attēls ir atkārtots, pirmais gadījums tiek novietots norādītā pozicionēšanas apgabala augšējā kreisajā stūrī, un pēc tam tas tiek atkārtots, sākot no turienes atbilstoši mask-repeatrekvizīta vērtībai .

Mainiet vērtību mask-originšajā demonstrācijā, lai iegūtu labāku priekšstatu par notiekošo: