Klip na masku - Triky CSS

Anonim

Vlastnosť mask-clipCSS je súčasťou špecifikácie úrovne maskovania modulu CSS 1 a nastavuje oblasť maľovania masky. Doslova orezáva oblasť pozadia prvku a definuje, ktoré oblasti sa majú maskou zobraziť: orámovanie, výplň alebo rámček s obsahom. Je to niečo ako položiť rám na fotografiu a zobraziť iba tie časti fotografie, ktoré rám nezakrýva. Iba v tomto prípade nastavujeme, čo sa bude orezávať pomocou hodnôt CSS Box Model.

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

Funguje to ako background-clipvlastnosť, ibaže má tri ďalšie hodnoty, ktoré sa vzťahujú na prvky SVG. V nasledujúcej ukážke môžete pomocou tejto vlastnosti zmeniť oblasť maľovania masky. Pod obrázkom je rovnaký obrázok, ktorý lepšie zobrazuje efekt maskovania a označenie okrajov a polstrovaných oblastí:

Syntax

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Pôvodná hodnota: border-box
  • Vzťahuje sa na: všetky prvky. V SVG platí pre prvky kontajnera s vylúčením prvku, všetky grafické prvky.
  • Zdedené: č
  • Typ animácie: diskrétna

Hodnoty

/* 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: Vymaľovaný obsah je orezaný na orámovanie. (Predvolená hodnota)
  • content-box: Vymaľovaný obsah je orezaný do poľa s obsahom.
  • fill-box: Vymaľovaný obsah je orezaný na ohraničujúci rámček objektu.
  • margin-box: Vymaľovaný obsah je orezaný na okrajovom poli.
  • padding-box: Vymaľovaný obsah sa pripne na polstrovanie.
  • stroke-box: Vymaľovaný obsah je orezaný na ohraničujúci rámček ťahu.
  • view-box: Ako referenčné pole použije najbližší výrez SVG. Ak viewBoxje pre prvok na vytváranie výrezu SVG zadaný atribút:
    • Referenčné pole je umiestnené na počiatku súradnicového systému určeného viewBoxatribútom.
    • Rozmer referenčného poľa je nastavená na widtha heighthodnôt viewBoxatribútu.
  • no-clip: Maľovaný obsah nie je orezaný.
  • initial: Použije predvolené nastavenie vlastnosti, ktoré je border-box.
  • inherit: Prijme mask-cliphodnotu rodiča.
  • unset: Odstráni prúd mask-clipz prvku.

Poznámky

  • Pre SVG prvky pripojenými rozvrhnutie CSS box, hodnôt content-box, padding-boxvypočítajte až fill-boxa border-boxa margin-boxpočítať sa stroke-box.
  • Pre prvky s priradeným poľom rozloženia CSS sa hodnoty fill-boxpočítajú do content-boxa pre stroke-boxa view-boxpočítajú s počiatočnou hodnotou, mask-clipktorá je border-box.

Použitie viacerých hodnôt

Táto vlastnosť môže mať pre klipy masiek zoznam hodnôt oddelených čiarkami a každá hodnota sa použije na zodpovedajúci obrázok vrstvy masky uvedený vo mask-imagevlastnosti. V nasledujúcom príklade prvá hodnota určuje oblasť maľovania masiek prvého obrázka, druhá hodnota určuje oblasť maľovania masiek druhého obrázka atď.

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

Ukážka

Podpora prehliadača

IE Hrana Firefox Chrome Safari Opera
Nie 79+ 53+ Všetky 4+ 15+
Android Chrome Android Firefox Prehliadač Android iOS Safari Opera Mobile
Všetky Všetky Všetky Všetky 59+
Zdroj: caniuse

Viac informácií

Článok zo 6. novembra 2016

Orezávanie a maskovanie v CSS

Mojtaba Seyedi