Mask-klamber - CSS-trikid

Anonim

mask-clipCSS vara on osa CSS maskeerimine Module Level 1 spetsifikatsioon ja seab mask värvimine piirkonnas. See lõikab sõna otseses mõttes elemendi taustapiirkonna ja määratleb, millised alad on maski kaudu nähtavad: ääris, polster või sisukast. See on umbes nagu paneks raami fotole, näidates ainult neid foto osi, mida raam ei kata. Ainult sel juhul määrame CSS-i kastimudeli väärtuste abil lõigatava sisu.

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

See töötab nagu background-clipatribuut, ainult et sellel on veel kolm lisaväärtust, mis kehtivad SVG elementidele. Järgmises demos saate selle omaduse abil muuta maski värvimise ala. Parema maskeerimise ning ääre- ja polsterdusalade tähistamise efekti näitamiseks on all sama pilt.

Süntaks

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Algne väärtus: border-box
  • Kehtib kõigi elementide kohta. SVG-s kehtib see konteinerelementidele, välja arvatud element, kõik graafikaelemendid.
  • Päritud: ei
  • Animatsiooni tüüp: diskreetne

Väärtused

/* 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: Värvitud sisu klammerdatakse äärekasti. (Vaikeväärtus)
  • content-box: Maalitud sisu klammerdatakse sisukasti.
  • fill-box: Maalitud sisu on kinnitatud objekti piiramise kasti külge.
  • margin-box: Värvitud sisu on varjatud kasti külge kinnitatud.
  • padding-box: Värvitud sisu on klambriga kinnitatud.
  • stroke-box: Värvitud sisu on kinnitatud lööki piirava kasti külge.
  • view-box: Kasutab viitekastina lähimat SVG vaateava. Kui viewBoxSVG-i vaateava loomise elemendile on määratud atribuut:
    • Viitekast asub viewBoxatribuudiga loodud koordinaatsüsteemi alguspunktis .
    • Mõõt viitekast on seatud widthja heightväärtused viewBoxatribuut.
  • no-clip: Maalitud sisu ei ole lõigatud.
  • initial: Rakendab atribuudi vaikesätet, mis on border-box.
  • inherit: Võtab vastu mask-clipvanema väärtuse.
  • unset: Eemaldab voolu mask-clipelemendist.

Märkused

  • SVG-elementide jaoks, millel pole seotud CSS-i paigutusekasti content-box, padding-boxarvutage väärtused ja arvutage nende fill-boxjaoks border-boxja margin-boxarvutage stroke-box.
  • Elementide kaasatud CSS paigutust kasti väärtusi fill-boxarvutada, et content-boxja stroke-boxja view-boxarvutama esialgse väärtuse mask-clip, mis on border-box.

Mitme väärtuse kasutamine

See omadus võib võtta komaga eraldatud väärtuste loendi maskiklippide jaoks ja iga väärtus rakendatakse mask-imageatribuudis määratletud vastava maskikihi kujutisele . Järgmises näites määrab esimene väärtus esimese pildi maskivärvimisala, teine ​​väärtus määrab teise pildi maskivärvimisala jne.

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

Demo

Brauseri tugi

IE Edge Firefox Chrome Safari Ooper
Ei 79+ 53+ Kõik 4+ 15+
Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mobile
Kõik Kõik Kõik Kõik 59+
Allikas: caniuse

Rohkem informatsiooni

Artikkel 6. novembril 2016

Lõikamine ja maskeerimine CSS-is

Mojtaba Seyedi