Kaukės kilmė CSS-gudrybės

mask-originNurodo kaukė poziciją plotas kaukę sluoksnio vaizdo. Kitaip tariant, jis apibrėžia, kur yra kaukės sluoksnio atvaizdo kilmė, nesvarbu, ar tai krašto kraštas, užpildas ar turinio langelis.

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

Elementams, pateikiamiems kaip viena dėžutė, mask-originnurodoma kaukės padėties sritis. Elementams, pateikiamiems kaip kelios dėžutės (pvz., Įterptinės dėžutės keliose eilutėse, langeliuose keliuose puslapiuose), ypatybė nurodo, kurios dėžutės box-decoration-breakveikia nustatant kaukės padėties sritį.

Ši ypatybė veikia kaip background-originnuosavybė, tik ji turi skirtingą pradinę vertę ir tris papildomas vertes, kurios taikomos SVG elementams.

Šioje demonstracijoje galite pakeisti kaukės sluoksnio vaizdo kilmę. Žemiau yra tas pats vaizdas, kuris parodo efektą, kaip geriau užmaskuoti ir pažymėti kraštines bei užpildymo sritis:

Sintaksė

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

Pradinė vertė: border-box
Taikoma visiems elementams. SVG jis taikomas konteinerio elementams, išskyrus elementą, visus grafikos elementus ir elementą.
Paveldima: ne
Animacijos tipas: diskretiškas

Vertybės

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

Vertės apibrėžimai

content-box: Padėtis yra susijusi su turinio laukeliu. Jei kilmės mask-imagepastatomas į viršų kairę kampe turinio krašto.
padding-box: Padėtis yra palyginti su paminkštinimo dėžute. Kaukės atvaizdo kilmė 0 0yra viršutiniame kairiajame kamšalo krašto kampe, tai 100% 100%yra apatinis dešinysis kampas.
border-box: Numatytoji vertė, nustatanti padėtį, palyginti su rėmeliu.
margin-box: Padėtis yra santykinė su paraštės langeliu
fill-box: Padėtis yra objekto ribojimo langelio atžvilgiu
stroke-box: Padėtis yra palyginti su smūgio ribojimo dėžute
view-box: Kaip nuorodos langelį naudojamas artimiausias SVG peržiūros sritis. Jei viewBoxSVG peržiūros srities kūrimo elementui nurodomas atributas, nuorodos laukelis dedamas ties viewBoxatributu nustatytos koordinačių sistemos pradžia , o atskaitos langelio matmuo nustatomas pagal atributo widthir heightreikšmes viewBox.
initial: Taiko numatytąjį nuosavybės nustatymą, kuris yraborder-box
inherit: Priima mask-origintėvų vertę.
unset: Pašalina srovę mask-originiš elemento.

Naudojant kelias reikšmes

Ši ypatybė gali turėti kableliais atskirtą kaukių kilmės reikšmių sąrašą, kur kiekviena reikšmė taikoma atitinkamam mask-imageypatybėje nurodytam kaukės sluoksnio vaizdui . Toliau pateiktame pavyzdyje pirmoji reikšmė nurodo pirmojo atvaizdo kilmę, antroji - antrojo atvaizdo kilmę ir pan.

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

Pastabos

Dėl SVG elementų be atitinkamų CSS išdėstymo langelyje vertybių content-box, padding-boxir border-boxCompute į fill-box.
Elementų su susijusiais CSS išdėstymo langelyje vertybių fill-box, stroke-boxir view-boxCompute į initialvertės mask-origin, kuri yra border-box.

Demonstracija

Kai pakartosime kaukės sluoksnio vaizdą, pirmasis egzempliorius išdėstomas viršutiniame kairiajame nurodytos padėties nustatymo srities kampe, o tada jis kartojamas pradedant nuo ten pagal ypatybės vertę mask-repeat.

Pakeiskite šio mask-origindemo vertę , kad geriau suprastumėte, kas vyksta: