Maska-klips - CSS-triki

Anonim

mask-clipCSS īpašums ir daļa no 1 CSS maskēšana modulis līmeņa specifikācijas un nosaka maska glezna zonu. Tas burtiski sagriež elementa fona laukumu un nosaka, kuras zonas tiek rādītas caur masku: apmali, polsterējumu vai satura lodziņu. Tas ir līdzīgi kā rāmja ievietošana fotoattēlā, parādot tikai tās fotoattēla daļas, kuras rāmis neaizsedz. Tikai šajā gadījumā mēs iestatām to, kas tiek izgriezts, izmantojot CSS Box Model vērtības.

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

Tas darbojas tāpat kā background-clipīpašums, izņemot to, ka tam ir trīs papildu vērtības, kas attiecas uz SVG elementiem. Šajā demonstrācijā jūs varat mainīt maskas krāsošanas zonu, izmantojot šo īpašumu. 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-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Sākotnējā vērtība: border-box
  • Attiecas uz: visiem elementiem. SVG tas attiecas uz konteinera elementiem, izņemot elementu, visus grafiskos elementus.
  • Mantots: nē
  • Animācijas veids: diskrēts

Vērtības

/* 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: Krāsotais saturs tiek piegriezts pie apmales kastes. (Noklusējuma vērtība)
  • content-box: Krāsotais saturs tiek piegriezts satura lodziņā.
  • fill-box: Krāsotais saturs tiek piegriezts pie objektu ierobežojošās kastes.
  • margin-box: Krāsotais saturs tiek piegriezts pie piemales lodziņa.
  • padding-box: Krāsotais saturs ir piestiprināts pie polsterējuma kastes.
  • stroke-box: Krāsotais saturs ir piestiprināts pie gājiena ierobežojošās kastes.
  • view-box: Kā atsauces lodziņu izmanto tuvāko SVG skata punktu. Ja viewBoxSVG skata porta izveides elementam ir norādīts atribūts:
    • Atsauces lodziņš atrodas koordinātu sistēmas, kas izveidota ar viewBoxatribūtu, sākumpunktā .
    • Atsauces lodziņa dimensija ir iestatīta uz widthun atribūta heightvērtībām viewBox.
  • no-clip: Krāsotais saturs nav apgriezts.
  • initial: Piemēro īpašuma noklusējuma iestatījumu, kas ir border-box.
  • inherit: Pieņem mask-clipvecāku vērtību.
  • unset: Noņem strāvu mask-clipno elementa.

Piezīmes

  • SVG elementiem bez saistītā CSS izkārtojuma lodziņa vērtības content-box, padding-boxaprēķiniet uz fill-boxun par border-boxun margin-boxaprēķiniet uz stroke-box.
  • Par elementiem ar asociēto CSS izkārtojuma ailē vērtības fill-boxaprēķināt, lai content-boxgan stroke-box, un view-boxaprēķināt to sākotnējo vērtību, no mask-clipkura ir border-box.

Vairāku vērtību izmantošana

Šis rekvizīts var ņemt komatu atdalītu vērtību sarakstu masku klipiem, un katra vērtība tiek piemērota attiecīgajam maskas slāņa attēlam, kas norādīts mask-imageīpašumā. Šajā piemērā pirmā vērtība norāda pirmā attēla masku krāsošanas laukumu, otrā vērtība norāda otrā attēla maskas krāsošanas laukumu utt.

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

Demonstrācija

Pārlūkprogrammas atbalsts

IE Mala Firefox Chrome Safari Opera
Nē 79+ 53+ Viss 4+ 15+
Android Chrome Android Firefox Android pārlūks iOS Safari Opera Mobile
Viss Viss Viss Viss 59+
Avots: caniuse

Vairāk informācijas

Raksts 2016. gada 6. novembrī

Nogriešana un maskēšana CSS

Mojtaba Seyedi