Kaukė-segtukas - CSS-gudrybės

Anonim

mask-clipCSS nuosavybė yra dalis 1 CSS Maskavimo modulis lygio specifikacijos, ir nustato kaukė tapyba plotą. Jis tiesiogine prasme apkarpo elemento fono plotą ir apibrėžia, kurios sritys rodomos per kaukę: kraštinė, užpildas ar turinio dėžutė. Tai panašu į rėmelio uždėjimą ant nuotraukos, rodant tik tas nuotraukos dalis, kurių rėmelis nedengia. Tik šiuo atveju mes nustatome tai, kas bus iškirpta, naudojant CSS dėžutės modelio vertes.

.element ( mask-image: url(sun.svg); mask-clip: padding-box; )

Tai veikia kaip background-clipnuosavybė, išskyrus tai, kad joje yra trys papildomos vertės, taikomos SVG elementams. Šioje demonstracijoje galite pakeisti kaukės dažymo plotą naudodami šią savybę. Žemiau yra tas pats vaizdas, kuris parodo efektą, kaip geriau užmaskuoti ir pažymėti kraštines bei užpildymo sritis:

Sintaksė

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Pradinė vertė: border-box
  • Taikoma: visiems elementams. SVG jis taikomas konteinerio elementams, išskyrus elementą, visus grafikos elementus.
  • Paveldima: ne
  • Animacijos tipas: diskretiškas

Vertybės

/* Keyword values */ mask-clip: border-box; mask-clip: content-box; mask-clip: fill-box; mask-clip: margin-box; mask-clip: padding-box; mask-clip: stroke-box; mask-clip: view-box; /* No clip */ mask-clip: no-clip; /* Global values */ mask-clip: intial; mask-clip: inherit; mask-clip: unset;
  • border-box: Nudažytas turinys yra nukirptas prie sienos krašto. (Numatytoji reikšmė)
  • content-box: Nupieštas turinys nukerpamas prie turinio dėžutės.
  • fill-box: Nudažytas turinys yra apkarpomas prie objektą ribojančios dėžės.
  • margin-box: Nudažytas turinys yra nukirptas prie paraštės langelio.
  • padding-box: Nudažytas turinys pritvirtinamas prie paminkštinimo dėžės.
  • stroke-box: Nudažytas turinys yra pritvirtintas prie smūgio ribojimo dėžės.
  • view-box: Kaip nuorodos langelį naudojamas artimiausias SVG peržiūros sritis. Jei viewBoxSVG peržiūros srities kūrimo elementui nurodomas atributas:
    • Nuorodos langelis išdėstytas koordinačių sistemos, nustatytos pagal viewBoxatributą, ištakose.
    • Nuorodos langelio matmuo nustatomas pagal atributo reikšmes widthir heightreikšmes viewBox.
  • no-clip: Nupieštas turinys nekarpomas.
  • initial: Taiko numatytąjį nuosavybės nustatymą, kuris yra border-box.
  • inherit: Priima mask-cliptėvų vertę.
  • unset: Pašalina srovę mask-clipiš elemento.

Pastabos

  • SVG elementų be susieto CSS išdėstymo laukelio reikšmės content-box, padding-boxapskaičiuokite fill-boxir už border-boxir margin-boxpaskaičiuokite stroke-box.
  • Elementų su susijusiais CSS išdėstymo langelyje vertės fill-boxapskaičiuoti, kad content-boxir stroke-boxir view-boxapskaičiuoti, kad pradinė vertė mask-clip, kuri yra border-box.

Naudojant kelias reikšmes

Ši ypatybė gali sudaryti kableliais atskirtą kaukių klipų verčių sąrašą ir kiekviena reikšmė taikoma atitinkamam mask-imageypatybėje nurodytam kaukės sluoksnio vaizdui . Toliau pateiktame pavyzdyje pirmoji reikšmė nurodo pirmo paveikslo kaukės dažymo plotą, antroji reikšmė nurodo antrojo vaizdo kaukės dažymo plotą ir pan.

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

Demonstracija

Naršyklės palaikymas

T.Y Briauna „Firefox“ „Chrome“ „Safari“ Opera
Ne 79+ 53+ Viskas 4+ 15+
„Android Chrome“ „Android Firefox“ „Android“ naršyklė „iOS Safari“ „Opera Mobile“
Viskas Viskas Viskas Viskas 59+
Šaltinis: caniuse

Daugiau informacijos

Straipsnis 2016 m. Lapkričio 6 d

Karpymas ir maskavimas CSS

Mojtaba Seyedi