Masca-clip - CSS-Tricks

Anonim

Proprietatea mask-clipCSS face parte din specificația CSS Masking Module Level 1 și setează zona de pictare a măștii. Clipează literalmente zona de fundal a unui element și definește ce zone se afișează prin mască: bordură, umplutură sau casetă de conținut. Este ca și cum ai pune rama pe o fotografie, arătând doar părțile fotografiei care nu sunt acoperite de rama. Numai că, în acest caz, setăm ceea ce se decupează folosind valorile CSS Box Model.

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

Aceasta funcționează ca background-clipproprietatea, cu excepția faptului că are trei valori suplimentare care se aplică elementelor SVG. În următoarea demonstrație puteți schimba zona de pictură a măștii folosind această proprietate. Există aceeași imagine dedesubt pentru a arăta efectul de a masca mai bine și de a marca marginea și zonele de căptușire:

Sintaxă

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Valoarea initiala: border-box
  • Se aplică tuturor elementelor. În SVG, se aplică elementelor containerului, cu excepția elementului, toate elementele grafice.
  • Moștenit: nu
  • Tipul de animație: discret

Valori

/* 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: Conținutul pictat este fixat în caseta de margine. (Valoare implicită)
  • content-box: Conținutul pictat este fixat în caseta de conținut.
  • fill-box: Conținutul pictat este fixat în caseta de delimitare a obiectelor.
  • margin-box: Conținutul pictat este fixat în caseta de margine.
  • padding-box: Conținutul vopsit este fixat pe cutia de umplutură.
  • stroke-box: Conținutul pictat este fixat în caseta de limitare a cursei.
  • view-box: Folosește cea mai apropiată fereastră SVG ca casetă de referință. Dacă viewBoxeste specificat un atribut pentru elementul de creare a ferestrei SVG:
    • Caseta de referință este poziționată la originea sistemului de coordonate stabilit de viewBoxatribut.
    • Dimensiunea casetei de referință este setată la valorile widthși heightvalorile viewBoxatributului.
  • no-clip: Conținutul pictat nu este decupat.
  • initial: Aplică setarea implicită a proprietății, care este border-box.
  • inherit: Adoptă mask-clipvaloarea părintelui.
  • unset: Elimină curentul mask-clipdin element.

Note

  • Pentru elementele SVG fără casetă de aspect CSS asociată, valorile content-box, padding-boxcalculează pentru fill-boxși pentru border-boxși margin-boxcalculează pentru stroke-box.
  • Pentru elementele cu caseta de aspect CSS asociată, valorile se fill-boxcalculează la content-boxși pentru stroke-boxși se view-boxcalculează la valoarea inițială a mask-clipcărei este border-box.

Folosind valori multiple

Această proprietate poate lua o listă de valori separate prin virgulă pentru clipurile de mască și fiecare valoare este aplicată unei imagini de strat de mască corespunzătoare specificată în mask-imageproprietate. În exemplul următor, prima valoare specifică zona de pictură a măștii primei imagini, a doua valoare specifică zona de pictare a măștii a celei de-a doua imagini și așa mai departe.

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

Demo

Suport pentru browser

IE Margine Firefox Crom Safari Operă
Nu Peste 79 de ani Peste 53 de ani Toate 4+ 15+
Android Chrome Android Firefox Browser Android Safari iOS Opera Mobile
Toate Toate Toate Toate Peste 59 de ani
Sursa: caniuse

Mai multe informatii

Articolul din 6 noiembrie 2016

Decupare și mascare în CSS

Mojtaba Seyedi