Klip na masku - Triky CSS

Anonim

Vlastnost mask-clipCSS je součástí specifikace CSS Masking Module úrovně 1 a nastavuje oblast malování masky. Doslova klipy oblast pozadí prvku a definuje, které oblasti se zobrazí přes masku: ohraničení, polstrování nebo pole obsahu. Je to něco jako dát rámeček na fotografii a ukázat pouze ty části fotografie, které rámeček nezakrývá. Pouze v tomto případě nastavujeme, co se ořízne pomocí hodnot modelu CSS Box.

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

To funguje jako background-clipvlastnost, kromě toho, že má tři další hodnoty, které platí pro prvky SVG. V následující ukázce můžete pomocí této vlastnosti změnit oblast malování masky. Stejný obrázek je dole, aby se lépe zobrazil efekt maskování a označení okrajů a vycpávek:

Syntax

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Počáteční hodnota: border-box
  • Platí pro: všechny prvky. V SVG platí pro prvky kontejneru s výjimkou prvku, všechny grafické prvky.
  • Zděděno: ne
  • Typ animace: diskrétní

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: Malovaný obsah je oříznut na rámečku ohraničení. (Výchozí hodnota)
  • content-box: Malovaný obsah je oříznut do pole obsahu.
  • fill-box: Malovaný obsah je oříznut na ohraničující rámeček objektu.
  • margin-box: Malovaný obsah je oříznut na okrajové pole.
  • padding-box: Malovaný obsah je připnut na polstrování.
  • stroke-box: Malovaný obsah je oříznut na ohraničující rámeček tahu.
  • view-box: Jako referenční pole použije nejbližší výřez SVG. Pokud viewBoxje pro prvek vytváření výřezu SVG zadán atribut:
    • Referenční pole je umístěno na počátku souřadnicového systému vytvořeného viewBoxatributem.
    • Rozměr referenčního pole je nastavena na widtha heighthodnot viewBoxatributu.
  • no-clip: Malovaný obsah není oříznut.
  • initial: Použije výchozí nastavení vlastnosti, což je border-box.
  • inherit: Přijme mask-cliphodnotu nadřazeného objektu.
  • unset: Odstraní proud mask-clipz prvku.

Poznámky

  • Pro SVG prvky připojenými rozvržení CSS box, hodnot content-box, padding-boxvypočtěte až fill-boxa border-boxa margin-boxpočítat se stroke-box.
  • U prvků s přidruženým rámečkem rozložení CSS se hodnoty fill-boxpočítají do content-boxa pro stroke-boxa view-boxpočítají se počáteční hodnotou, mask-clipkterá je border-box.

Použití více hodnot

Tato vlastnost může pro klipy masky oddělit seznam hodnot oddělených čárkami a každá hodnota se použije na odpovídající obrázek vrstvy masky určený ve mask-imagevlastnosti. V následujícím příkladu první hodnota určuje oblast malování masky prvního obrázku, druhá hodnota určuje oblast malování masky druhého obrázku atd.

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

Ukázka

Podpora prohlížeče

TJ Okraj Firefox Chrome Safari Opera
Ne 79+ 53+ Všechno 4+ 15+
Android Chrome Android Firefox Prohlížeč Android iOS Safari Opera Mobile
Všechno Všechno Všechno Všechno 59+
Zdroj: caniuse

Více informací

Článek ze dne 6. listopadu 2016

Ořezávání a maskování v CSS

Mojtaba Seyedi