Mask-klipp - CSS-tricks

Anonim

Den mask-clipCSS Fastigheten är en del av CSS Masking modulnivå en specifikation, och sätter masken måla området. Det klipps bokstavligen bakgrundsytan för ett element och definierar vilka områden som visas genom masken: kant, vaddering eller innehållsruta. Det är som att sätta ramen på ett foto, bara visa de delar av fotot som inte täcks av ramen. Endast i det här fallet ställer vi in ​​vad som klipps med CSS Box Model-värden.

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

Detta fungerar som background-clipegenskapen, förutom att det har tre ytterligare värden som gäller SVG-element. I följande demo kan du ändra maskmålningsområdet med den här egenskapen. Det finns samma bild under för att visa effekten av att maskera bättre och markera kant- och stoppningsområdena:

Syntax

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Ursprungligt värde: border-box
  • Gäller för: alla element. I SVG gäller det containerelement exklusive elementet, alla grafikelement.
  • Ärvt: nej
  • Animationstyp: diskret

Värden

/* 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: Det målade innehållet klipps till kantlådan. (Standardvärde)
  • content-box: Det målade innehållet klipps till innehållsrutan.
  • fill-box: Det målade innehållet klipps till objektets avgränsningsruta.
  • margin-box: Det målade innehållet klipps till marginalrutan.
  • padding-box: Det målade innehållet fästs i stopplådan.
  • stroke-box: Det målade innehållet klipps till rutan för streckgräns.
  • view-box: Använder närmaste SVG-visningsport som referensruta. Om ett viewBoxattribut anges för SVG-visningsport skapande element:
    • Referensrutan är placerad vid ursprunget till det koordinatsystem som upprättats av viewBoxattributet.
    • Referensrutans dimension är inställd på attributets värden widthoch heightvärden viewBox.
  • no-clip: Det målade innehållet är inte klippt.
  • initial: Tillämpar egenskapens standardinställning, vilket är border-box.
  • inherit: Antar mask-clipvärdet på föräldern.
  • unset: Tar bort strömmen mask-clipfrån elementet.

Anteckningar

  • För SVG-element utan tillhörande CSS-layoutruta content-box, padding-boxberäknar värdena till fill-boxoch för border-boxoch margin-boxberäkna till stroke-box.
  • För element med tillhörande CSS-layout rutan värdena fill-boxberäkna till content-boxoch för stroke-boxoch view-boxberäkna till det initiala värdet av mask-clipvilket är border-box.

Använda flera värden

Den här egenskapen kan ta en kommaseparerad lista över värden för maskklipp och varje värde tillämpas på en motsvarande masklagerbild som anges i mask-imageegenskapen. I följande exempel anger det första värdet maskeringsmålningsområdet för den första bilden, det andra värdet anger maskmålningsområdet för den andra bilden och så vidare.

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

Demo

Webbläsarstöd

IE Kant Firefox Krom Safari Opera
Nej 79+ 53+ Allt 4+ 15+
Android Chrome Android Firefox Android-webbläsare iOS Safari Opera Mobile
Allt Allt Allt Allt 59+
Källa: caniuse

Mer information

Artikel den 6 nov 2016

Klippning och maskering i CSS

Mojtaba Seyedi