Klips do maski - CSS-Tricks

Anonim

Właściwość mask-clipCSS jest częścią specyfikacji CSS Masking Module Level 1 i określa obszar malowania maski. Dosłownie przycina obszar tła elementu i określa, które obszary są widoczne przez maskę: obramowanie, dopełnienie lub pole zawartości. To trochę tak, jakby umieścić ramkę na zdjęciu, pokazując tylko te części zdjęcia, które nie są objęte ramką. Tylko w tym przypadku ustawiamy to, co jest przycinane za pomocą wartości CSS Box Model.

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

Działa to podobnie jak background-clipwłaściwość, z tą różnicą, że ma trzy dodatkowe wartości, które mają zastosowanie do elementów SVG. W poniższym demo możesz zmienić obszar malowania maski za pomocą tej właściwości. Poniżej znajduje się ten sam obraz, aby pokazać efekt lepszego maskowania i zaznaczania granic i obszarów wypełnienia:

Składnia

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Wartość początkowa: border-box
  • Dotyczy: wszystkich elementów. W SVG dotyczy to elementów kontenera z wyłączeniem elementu, wszystkich elementów graficznych.
  • Odziedziczone: nie
  • Typ animacji: dyskretna

Wartości

/* 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: Malowana zawartość jest przycinana do ramki granicznej. (Domyślna wartość)
  • content-box: Malowana zawartość jest przycinana do pola treści.
  • fill-box: Malowana zawartość jest przycinana do obwiedni obiektu.
  • margin-box: Malowana zawartość jest przycinana do pola marginesu.
  • padding-box: Malowana zawartość jest przypinana do pola wypełniającego.
  • stroke-box: Malowana zawartość jest przycinana do obrysu obwiedni.
  • view-box: Wykorzystuje najbliższą rzutnię SVG jako ramkę odniesienia. Jeśli viewBoxatrybut jest określony dla elementu tworzącego rzutnię SVG:
    • Ramka odniesienia jest umieszczona na początku układu współrzędnych ustalonego przez viewBoxatrybut.
    • Wymiar pola odniesienia jest ustawiany na wartości widthi atrybutu.heightviewBox
  • no-clip: Malowana zawartość nie jest przycinana.
  • initial: Stosuje domyślne ustawienie właściwości, czyli border-box.
  • inherit: Przyjmuje mask-clipwartość rodzica.
  • unset: Usuwa prąd mask-clipz elementu.

Uwagi

  • Dla elementów SVG bez obecności polu układu CSS, wartości content-box, padding-boxWyznacz fill-boxi dla border-boxi margin-boxobliczeniowych do stroke-box.
  • W przypadku elementów ze skojarzonym polem układu CSS wartości są fill-boxobliczane do content-boxi dla stroke-boxoraz view-boxobliczane do wartości początkowej, mask-clipktórej jest border-box.

Używanie wielu wartości

Ta właściwość może przyjmować listę wartości oddzielonych przecinkami dla klipów maskujących, a każda wartość jest stosowana do odpowiedniego obrazu warstwy maski określonego we mask-imagewłaściwości. W poniższym przykładzie pierwsza wartość określa obszar malowania maski pierwszego obrazu, druga wartość określa obszar malowania maski drugiego obrazu i tak dalej.

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

Próbny

Wsparcie przeglądarki

TO ZNACZY Brzeg Firefox Chrom Safari Opera
Nie 79+ 53+ Wszystko 4+ 15+
Android Chrome Android Firefox Przeglądarka Android iOS Safari Opera Mobile
Wszystko Wszystko Wszystko Wszystko 59+
Źródło: caniuse

Więcej informacji

Artykuł z 6 listopada 2016 r

Obcinanie i maskowanie w CSS

Mojtaba Seyedi