Maska-isječak - CSS-trikovi

Anonim

mask-clipCSS svojstvo je dio CSS Maskiranje Modul Razina 1 specifikaciji, te postavlja maska bojenja prostora. Doslovno izrezuje područje pozadine elementa i definira koja područja se prikazuju kroz masku: obrub, udaljenost ili okvir za sadržaj. To je nekako poput stavljanja okvira na fotografiju, prikazujući samo dijelove fotografije koji nisu pokriveni okvirom. Samo, u ovom slučaju, postavljamo ono što se izreže pomoću vrijednosti CSS Box modela.

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

Ovo funkcionira poput background-clipsvojstva, osim što ima tri dodatne vrijednosti koje se primjenjuju na SVG elemente. U sljedećem pokaznom dijelu možete promijeniti područje slikanja maske pomoću ovog svojstva. Ispod je ista slika koja pokazuje učinak boljeg maskiranja i označavanja područja obruba i obloga:

Sintaksa

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Početna vrijednost: border-box
  • Odnosi se na: sve elemente. U SVG-u se odnosi na elemente spremnika isključujući element, sve grafičke elemente.
  • Naslijeđeno: ne
  • Vrsta animacije: diskretna

Vrijednosti

/* 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: Obojeni sadržaj prikvačen je u rubni okvir. (Zadana vrijednost)
  • content-box: Obojeni sadržaj se odsječe u okvir sa sadržajem.
  • fill-box: Naslikani sadržaj prikvačen je u okvir za ograničavanje predmeta.
  • margin-box: Naslikani sadržaj prikvačen je na okvir margine.
  • padding-box: Obojeni sadržaj prikvačen je u okvir za umetanje.
  • stroke-box: Obojeni sadržaj pričvršćen je na okvir za ograničavanje poteza.
  • view-box: Koristi najbliži prikaz SVG-a kao referentni okvir. Ako je viewBoxatribut naveden za SVG element stvaranja prozora:
    • Referentni okvir postavljen je na ishodište koordinatnog sustava uspostavljenog viewBoxatributom.
    • Dimenzija referentnog okvira postavljena je na widthi heightvrijednosti viewBoxatributa.
  • no-clip: Obojeni sadržaj nije isječen.
  • initial: Primjenjuje zadanu postavku svojstva, koja je border-box.
  • inherit: Prihvaća mask-clipvrijednost roditelja.
  • unset: Uklanja struju mask-clipiz elementa.

Bilješke

  • Za SVG elemenata koji nemaju CSS kutije, vrijednosti content-box, padding-boxračunanje na fill-boxte border-boxi margin-boxizračunali da stroke-box.
  • Za elemente s pripadajućim CSS kutije, vrijednosti fill-boxizračunati da content-boxte stroke-boxi view-boxizračunali na početne vrijednosti od mask-clipkojih je border-box.

Korištenje više vrijednosti

Ovo svojstvo može uzeti popis vrijednosti odvojenih zarezom za isječke maske i svaka se vrijednost primjenjuje na odgovarajuću sliku sloja maske navedenu u mask-imagesvojstvu. U sljedećem primjeru prva vrijednost određuje područje slikanja maske prve slike, druga vrijednost određuje područ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

Podrška preglednika

IE Rub Firefox Krom Safari Opera
Ne 79+ 53+ svi 4+ 15+
Android Chrome Android Firefox Android preglednik iOS Safari Opera Mobile
svi svi svi svi 59+
Izvor: caniuse

Više informacija

Članak 6. studenog 2016

Isecanje i maskiranje u CSS-u

Mojtaba Seyedi