Maszk-klip - CSS-trükkök

Anonim

A mask-clipCSS tulajdonság a CSS Masking Modul 1. szintű specifikációjának része, és meghatározza a maszk festési területét. A szó szoros értelmében levágja egy elem háttérterületét, és meghatározza, hogy mely területek jelennek meg a maszkon keresztül: szegély, párnázás vagy tartalom mező. Ez olyan, mintha a keretet egy fényképre tennénk, és csak azokat a részeket mutatnánk be, amelyeket a keret nem takar. Csak ebben az esetben a CSS Box Model értékeivel állítjuk be, hogy mit vágunk le.

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

Ez a background-cliptulajdonsághoz hasonlóan működik , azzal a különbséggel, hogy három további értéke van az SVG elemekre. A következő bemutatóban megváltoztathatja a maszkfestési területet ezzel a tulajdonsággal. Ugyanaz a kép van alatta, amely megmutatja a jobb maszkolás, valamint a szegély és a párnázási területek jelölésének hatását:

Szintaxis

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Kezdő érték: border-box
  • Alkalmazható: minden elem. Az SVG-ben a konténerelemekre vonatkozik, kivéve az elemet, az összes grafikai elemet.
  • Örökölt: nem
  • Animáció típusa: diszkrét

Értékek

/* 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: A festett tartalmat a határdobozba vágják. (Alapértelmezett érték)
  • content-box: A festett tartalom a tartalom dobozba van vágva.
  • fill-box: A festett tartalmat az objektumhatároló dobozba vágják.
  • margin-box: A festett tartalom a margódobozra van vágva.
  • padding-box: A festett tartalmat a párnázódobozra csíptetjük.
  • stroke-box: A festett tartalmat a lökethatároló dobozhoz csíptetjük.
  • view-box: A legközelebbi SVG nézetablakot használja referenciamezőként. Ha viewBoxattribútum van megadva az SVG nézetablak létrehozó eleméhez:
    • A referencia mező az viewBoxattribútum által létrehozott koordinátarendszer kezdőpontjánál helyezkedik el .
    • A referenciamező dimenziója az attribútum widthés heightértékeire van állítva viewBox.
  • no-clip: A festett tartalom nincs levágva.
  • initial: A tulajdonság alapértelmezett beállítását alkalmazza border-box.
  • inherit: Elfogadja mask-clipa szülő értékét.
  • unset: Eltávolítja az áramot mask-clipaz elemtől.

Megjegyzések

  • SVG elemek nélkül kapcsolódó CSS elrendezés doboz, az értékek content-box, padding-boxszámítási és fill-boxés border-boxés margin-boxszámítási hogy stroke-box.
  • Elemeket a kapcsolódó CSS elrendezés doboz, az értékek fill-boxkiszámításához a content-boxés stroke-boxés view-boxszámítási kezdeti értékét mask-clip, ami border-box.

Több érték használata

Ez a tulajdonság vesszővel elválasztott értéklistát vehet fel a maszkklipekhez, és mindegyik értéket a mask-imagetulajdonságban megadott megfelelő maszkréteg képre alkalmazzák . A következő példában az első érték meghatározza az első kép maszkfestési területét, a második érték a második kép maszkfestési területét stb.

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

Demó

Böngésző támogatás

AZAZ Él Firefox Króm Szafari Opera
Nem 79+ 53+ Összes 4+ 15+
Android Chrome Android Firefox Android böngésző iOS Safari Opera Mobile
Összes Összes Összes Összes 59+
Forrás: caniuse

Több információ

Cikk 2016. november 6-án

Nyírás és maszkolás a CSS-ben

Mojtaba Seyedi