Maske-klipp - CSS-triks

Anonim

Den mask-clipCSS eiendom er en del av CSS Maske Modul nivå 1-spesifikasjonen, og setter masken male området. Den klipper bokstavelig talt bakgrunnsområdet til et element og definerer hvilke områder som vises gjennom masken: kantlinje, polstring eller innholdsboks. Det er som å sette rammen på et bilde, og bare vise de delene av bildet som ikke er dekket av rammen. Bare i dette tilfellet setter vi inn hva som blir klippet ved hjelp av CSS Box Model-verdier.

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

Dette fungerer som background-clipegenskapen, bortsett fra at den har tre tilleggsverdier som gjelder SVG-elementer. I den følgende demonstrasjonen kan du endre maske malingsområdet ved hjelp av denne egenskapen. Det er det samme bildet under for å vise effekten av å maskere bedre og markere kant- og polstringsområdene:

Syntaks

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Opprinnelig verdi: border-box
  • Gjelder for: alle elementer. I SVG gjelder det containerelementer unntatt elementet, alle grafikkelementer.
  • Arvet: nei
  • Animasjonstype: diskret

Verdier

/* 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 malte innholdet klippes til kantboksen. (Standardverdi)
  • content-box: Det malte innholdet klippes til innholdsboksen.
  • fill-box: Det malte innholdet er klippet til gjenstandsavgrensningsboksen.
  • margin-box: Det malte innholdet klippes til margboksen.
  • padding-box: Det malte innholdet er klippet til polstringsboksen.
  • stroke-box: Det malte innholdet er klippet til strekbegrensningsboksen.
  • view-box: Bruker nærmeste SVG-visningsport som referanse. Hvis et viewBoxattributt er spesifisert for SVG-visningsportopprettingselementet:
    • Referansefeltet er plassert ved opprinnelsen til koordinatsystemet som ble opprettet av viewBoxattributtet.
    • Dimensjonen til referansefeltet er satt til widthog heightverdiene til viewBoxattributtet.
  • no-clip: Det malte innholdet er ikke klippet.
  • initial: Bruker egenskapens standardinnstilling, som er border-box.
  • inherit: Vedtar mask-clipverdien av foreldrene.
  • unset: Fjerner strømmen mask-clipfra elementet.

Merknader

  • For SVG elementer uten tilhørende CSS-layout-boksen, verdier content-box, padding-boxberegne i fill-boxog for border-boxog margin-boxberegne til stroke-box.
  • For elementer med tilhørende CSS-layoutboks fill-boxberegner verdiene til content-boxog for stroke-boxog view-boxberegner til den opprinnelige verdien mask-clipsom er border-box.

Bruke flere verdier

Denne egenskapen kan ta en kommaseparert liste over verdier for maskeklipp, og hver verdi blir brukt på et tilsvarende maskeringslag som er spesifisert i mask-imageegenskapen. I det følgende eksemplet spesifiserer den første verdien maskeringsområdet for det første bildet, den andre verdien spesifiserer maskeringsområdet for det andre bildet og så videre.

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

Demo

Nettleserstøtte

DVS Kant Firefox Chrome Safari Opera
Nei 79+ 53+ Alle 4+ 15+
Android Chrome Android Firefox Android-nettleser iOS Safari Opera Mobile
Alle Alle Alle Alle 59+
Kilde: caniuse

Mer informasjon

Artikkel 6. nov 2016

Klipping og maskering i CSS

Mojtaba Seyedi