Pozice masky - Triky CSS

Anonim

V CSS tato mask-positionvlastnost určuje počáteční polohu obrazu vrstvy masky vzhledem k oblasti polohy masky. Funguje to jako background-positionvlastnost.

.element ( mask-image: url("star.svg"); mask-position: 20px center; )

Maskování umožňuje zobrazit vybrané části prvku a ostatní skrýt. V následující ukázce můžete změnit pozici obrázku vrstvy masky:

Syntax

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Počáteční hodnota: 0% 0%
  • Platí pro: všechny prvky. V SVG platí pro elementy kontejneru kromě elementu, všech grafických elementů a elementu.
  • Zděděno: ne
  • Vypočítaná hodnota: skládající se z: dvou klíčových slov představujících počátek a dvou kompenzací od tohoto počátku, každé zadané jako absolutní délka (pokud je zadáno a ), jinak jako procento.
  • Typ animace: opakovatelný seznam

Hodnoty

Může být zadán, pokud jde o ofsetových klíčových slov ( top, left, bottom, righta center), procenta, a hodnoty délky týkající hrany prvku, podobně jako CSS background-positionmajetku.

/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center; 
 /* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh; 
 /* Percentage values */ mask-position: 25% 50%; 
 /* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;

Definice hodnot

  • : Libovolný platný délka CSS (jako je například px, em, rema %, mezi jinými), která určí, jak daleko je okraj masky snímku je od odpovídajícího okraje prvku.
  • : Určuje polohu obrazu vrstvy masky jako procentuální hodnotu vzhledem k oblasti umístění masky minus velikost obrazu masky.
  • top: Ekvivalent 0% pro svislou polohu.
  • right: Odpovídá 100% pro vodorovnou polohu.
  • bottom: Odpovídá 100% pro svislou polohu.
  • left: Odpovídá 0% pro vodorovnou polohu.
  • center: Odpovídá 50% pro vodorovnou polohu, pokud není vodorovná poloha specifikována jinak, nebo 50% pro svislou polohu, pokud je.
  • initial: Použije výchozí nastavení vlastnosti, což je 0% 0%.
  • inherit: Přijme mask-positionhodnotu nadřazeného objektu.
  • unset: Odstraní proud mask-positionz prvku.

Použití více hodnot

Tato vlastnost může převzít seznam hodnot hodnot pozic masky 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 polohu prvního obrázku, druhá hodnota určuje polohu druhého obrázku atd.

.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )

Odlišná syntaxe

mask-position může mít jednu, dvě, tři nebo čtyři hodnoty k určení polohy vrstvy masky vodorovně a svisle.

Jedna hodnota

V případě , že je nastavena jedna hodnota , je brána jako horizontální hodnota a vertikální hodnota je považována za center.

mask-position: 100px; /* 100px center */
Dvě hodnoty

V případě použití párových hodnot je první brána jako vodorovná hodnota a druhá určuje polohu svislé vrstvy.

mask-position: 10% 50%; /* x=10%, Y=50% */

Pokud jsou obě hodnoty klíčová slova, je pořadí klíčových slov irelevantní:

mask-position: top left; /* = left top */

Ale když máme kombinaci klíčových slov a délky nebo procenta, na pořadí záleží a první hodnota vždy odpovídá vodorovnému posunutí. Proto:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Tři hodnoty

Pokud jsou zadány tři hodnoty, předpokládá se, že chybějící offset je nula:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Čtyři hodnoty

Syntaxe se čtyřmi hodnotami umožňuje určit, na které strany prvku umisťujete masku relativně (hodnoty 1 a 3), a poté vzdálenost od těchto stran (hodnoty 2 a 4).

Pokud tedy chcete umístit masku 100px od spodní části prvku a 200px zprava, můžete udělat následující:

mask-position: bottom 100px right 200px;

Animační masky

Je možné animovat pozici masky mask-sizepomocí animace klíčových snímků a přechodu CSS, například následující:

.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; ) 
 .element:hover ( mask-position: right 10px bottom 10px; )

V tomto dalším ukázce animujeme pozici vrstvy masky pomocí animace klíčových snímků:

Ukázka

Změňte hodnotu pro mask-positionv následující ukázce:

Podpora prohlížeče

TJ Okraj Firefox Chrome Safari Opera
Ne 18+ 53+ 4+ 3,2+ 15+
Android Chrome Android Firefox Prohlížeč Android iOS Safari Opera Mobile
85+ 79+ 2.1+ 3,2+ 59+
Zdroj: caniuse

Více informací

  • CSS Masking Module Level 1 (návrh redakce)
  • Ořezávání a maskování v CSS
  • Clipping vs. Masking: When to Use each
  • # 185: Hraní s maskami CSS (video)