Maske-klip - CSS-tricks

Anonim

Den mask-clipCSS ejendom er en del af CSS Masking Modul niveau 1 specifikation, og sætter masken male område. Det klipper bogstaveligt baggrundsarealet for et element og definerer, hvilke områder der vises gennem masken: kant, polstring eller indholdsboks. Det er som at lægge rammen på et foto og kun vise de dele af billedet, der ikke er dækket af rammen. Kun i dette tilfælde indstiller vi, hvad der bliver klippet ved hjælp af CSS Box Model-værdier.

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

Dette fungerer som background-clipejendommen, bortset fra at den har tre yderligere værdier, der gælder for SVG-elementer. I den følgende demo kan du ændre maske malingsområdet ved hjælp af denne egenskab. Der er det samme billede nedenunder for at vise effekten af ​​at maskere bedre og markere kant- og polstringsområderne:

Syntaks

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Startværdi: border-box
  • Gælder for: alle elementer. I SVG gælder det for containerelementer eksklusive elementet, alle grafiske elementer.
  • Arvet: nej
  • Animationstype: diskret

Værdier

/* 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 malede indhold klemmes til kantboksen. (Standard værdi)
  • content-box: Det malede indhold klippes til indholdsboksen.
  • fill-box: Det malede indhold klemmes til objektets afgrænsningsboks.
  • margin-box: Det malede indhold klemmes til marginkassen.
  • padding-box: Det malede indhold klemmes til polstringsboksen.
  • stroke-box: Det malede indhold klemmes til stregafgrænsningsboksen.
  • view-box: Bruger den nærmeste SVG-visningsport som referenceboks. Hvis viewBoxder er angivet en attribut til SVG-visningsportelementet:
    • Referenceboksen er placeret ved oprindelsen til det koordinatsystem, der er oprettet af viewBoxattributten.
    • Referenceboksens dimension er indstillet til attributternes værdier widthog heightværdier viewBox.
  • no-clip: Det malede indhold er ikke klippet.
  • initial: Anvender egenskabens standardindstilling, som er border-box.
  • inherit: Vedtager mask-clipværdien af ​​den overordnede.
  • unset: Fjerner strømmen mask-clipfra elementet.

Bemærkninger

  • For SVG elementer uden associeret CSS layout kasse, de værdier content-box, padding-boxberegne til fill-boxog for border-boxog margin-boxberegne til stroke-box.
  • For elementer med tilhørende CSS-layoutfelt fill-boxberegnes værdierne til content-boxog for stroke-boxog view-boxberegnes til den oprindelige værdi, mask-clipsom er border-box.

Brug af flere værdier

Denne egenskab kan tage en komma-adskilt liste over værdier til maskeklip, og hver værdi anvendes på et tilsvarende maskerlagsbillede, der er angivet i mask-imageegenskaben. I det følgende eksempel specificerer den første værdi maskeringsmaleriområdet for det første billede, den anden værdi angiver maskeringsmaleriområdet for det andet billede osv.

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

Demo

Browsersupport

IE Edge Firefox Chrome Safari Opera
Ingen 79+ 53+ Alle 4+ 15+
Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
Alle Alle Alle Alle 59+
Kilde: caniuse

Mere information

Artikel den 6. november 2016

Klipning og maskering i CSS

Mojtaba Seyedi