Masker-clip - CSS-trucs

Anonim

De mask-clipCSS-eigenschap maakt deel uit van de CSS Masking Module Level 1-specificatie en stelt het maskerschildergebied in. Het knipt letterlijk het achtergrondgebied van een element en definieert welke gebieden door het masker heen worden weergegeven: rand, opvulling of inhoudskader. Het is zoiets als het frame op een foto plaatsen, waarbij alleen de delen van de foto worden weergegeven die niet door het frame worden bedekt. Alleen in dit geval stellen we in wat wordt afgekapt met behulp van CSS Box Model-waarden.

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

Dit werkt background-cliphetzelfde als de eigenschap, behalve dat het drie extra waarden heeft die van toepassing zijn op SVG-elementen. In de volgende demo kunt u met deze eigenschap het schildergebied voor het masker wijzigen. Er is dezelfde afbeelding hieronder om het effect van beter maskeren en het markeren van de rand en opvulgebieden te laten zien:

Syntaxis

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Beginwaarde: border-box
  • Geldt voor: alle elementen. In SVG is het van toepassing op containerelementen met uitzondering van het element, alle grafische elementen.
  • Overgenomen: nee
  • Animatietype: discreet

Waarden

/* 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​ (Standaardwaarde)
  • content-box​
  • fill-box​
  • margin-box​
  • padding-box​
  • stroke-box​
  • view-box​ Als een viewBoxattribuut is opgegeven voor het element dat de SVG-viewport maakt:
    • Het referentiekader bevindt zich op de oorsprong van het coördinatensysteem dat door het viewBoxattribuut is vastgesteld.
    • De dimensie van het referentiekader is ingesteld op de widthen heightwaarden van het viewBoxattribuut.
  • no-clip​
  • initial​border-box
  • inherit​mask-clip
  • unset​mask-clip

Opmerkingen

  • Voor SVG-elementen zonder bijbehorend CSS-lay-outvak content-box, padding-boxberekenen de waarden naar fill-boxen voor border-boxen margin-boxberekenen naar stroke-box.
  • Voor elementen met een bijbehorend CSS-lay-outvak, worden de waarden fill-boxberekend naar content-boxen voor stroke-boxen view-boxberekend naar de initiële waarde mask-clipwaarvan border-box.

Meerdere waarden gebruiken

Deze eigenschap kan een door komma's gescheiden lijst met waarden aannemen voor maskerclips en elke waarde wordt toegepast op een corresponderende maskerlaagafbeelding die in de mask-imageeigenschap is gespecificeerd . In het volgende voorbeeld specificeert de eerste waarde het maskerschildergebied van de eerste afbeelding, de tweede waarde specificeert het maskerschildergebied van de tweede afbeelding, enzovoort.

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

Demo

Browser-ondersteuning

D.W.Z Rand Firefox Chrome Safari Opera
Nee 79+ 53+ Alle 4+ 15+
Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
Alle Alle Alle Alle 59+
Bron: caniuse

Meer informatie

Artikel op 6 november 2016

Knippen en maskeren in CSS

Mojtaba Seyedi