Maska-sponka - CSS-triki

Anonim

Lastnost mask-clipCSS je del specifikacije modula za maskiranje CSS 1. stopnje in nastavi območje slikanja maske. Dobesedno odreže območje ozadja elementa in določi, katera območja se prikažejo skozi masko: obroba, oblazinjenje ali polje z vsebino. To je nekako tako, kot da postavite okvir na fotografijo in prikažete samo dele fotografije, ki jih okvir ne pokriva. Samo v tem primeru nastavimo, kaj bo odrezano, z uporabo vrednosti modela CSS Box.

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

To deluje kot background-cliplastnost, le da ima tri dodatne vrednosti, ki veljajo za elemente SVG. V naslednji predstavitvi lahko s to lastnostjo spremenite območje slikanja maske. Spodaj je ista slika, ki prikazuje učinek boljšega prikrivanja in označevanja meja in oblazinjenja:

Sintaksa

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Začetna vrednost: border-box
  • Velja za: vse elemente. V SVG velja za elemente vsebnika, razen elementa, vseh grafičnih elementov.
  • Podedovano: ne
  • Vrsta animacije: diskretna

Vrednote

/* 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: Naslikana vsebina je prirezana na obrobo. (Privzeta vrednost)
  • content-box: Naslikana vsebina se pripne v polje z vsebino.
  • fill-box: Naslikana vsebina je prirezana na polje za omejevanje predmeta.
  • margin-box: Naslikana vsebina je prirezana na robno polje.
  • padding-box: Naslikana vsebina je prirezana na polnilo.
  • stroke-box: Naslikana vsebina se pripne na okvir za omejevanje poteze.
  • view-box: Za referenčno polje uporabi najbližji pogled SVG. Če je viewBoxatribut podan za element ustvarjanja vidnega polja SVG:
    • Referenčno polje je postavljeno na izvoru koordinatnega sistema, ki ga določa viewBoxatribut.
    • Dimenzija referenčnega polja je nastavljena na widthin heightvrednosti viewBoxatributa.
  • no-clip: Naslikana vsebina ni odrezana.
  • initial: Uporabi privzeto nastavitev lastnosti, ki je border-box.
  • inherit: Sprejme mask-clipvrednost nadrejenega.
  • unset: Odstrani tok mask-clipiz elementa.

Opombe

  • Za elemente SVG brez povezanega polja postavitve CSS vrednosti content-box, padding-boxizračunajte v fill-boxin za border-boxter margin-boxizračunajte v stroke-box.
  • Za elemente s pripadajočim poljem postavitve CSS vrednosti fill-boxizračunajo za content-boxin za stroke-boxter view-boxizračunajo, katerih začetna vrednost mask-clipje border-box.

Uporaba več vrednosti

Ta lastnost lahko zapiše seznam vrednosti, ločenih z vejico, za posnetke maske in vsaka vrednost se uporabi za ustrezno sliko sloja maske, določeno v mask-imagelastnosti. V naslednjem primeru prva vrednost določa območje slikanja maske prve slike, druga vrednost območje slikanja maske druge slike itd.

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

Demo

Podpora brskalnika

IE Rob Firefox Chrome Safari Opera
Ne 79+ 53+ Vse 4+ 15+
Android Chrome Android Firefox Brskalnik Android iOS Safari Opera Mobile
Vse Vse Vse Vse 59+
Vir: kanius

Več informacij

Članek 6. novembra 2016

Izrezovanje in maskiranje v CSS

Mojtaba Seyedi