Pozícia masky - Triky CSS

Anonim

V CSS táto mask-positionvlastnosť určuje začiatočnú polohu obrázka vrstvy masky vzhľadom na oblasť polohy masky. Funguje to ako background-positionnehnuteľnosť.

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

Maskovanie umožňuje zobraziť vybrané časti prvku a zvyšok skryť. V nasledujúcej ukážke môžete zmeniť pozíciu obrázka vrstvy masky:

Syntax

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Pôvodná hodnota: 0% 0%
  • Vzťahuje sa na: všetky prvky. V SVG platí pre prvky kontajnera s vylúčením prvku, všetkých grafických prvkov a prvku.
  • Zdedené: č
  • Vypočítaná hodnota: pozostávajúca z: dvoch kľúčových slov predstavujúcich pôvod a dvoch kompenzácií od tohto začiatku, každé zadané ako absolútna dĺžka (ak je zadané a ), inak ako percento.
  • Typ animácie: opakovateľný zoznam

Hodnoty

Môže byť zadaný, pokiaľ ide o ofsetových kľúčových slov ( top, left, bottom, righta center), percentá, a hodnoty dĺžky týkajúce hrany prvku, podobne ako 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;

Definície hodnoty

  • : Ľubovoľný platný dĺžka CSS (ako je napríklad px, em, rema %, medzi inými), ktorá určí, ako ďaleko je okraj masky snímky je od zodpovedajúceho okraja prvku.
  • : Určuje pozíciu obrazu vrstvy masky ako percentuálnu hodnotu vzhľadom na oblasť umiestnenia masky mínus veľkosť obrázka masky.
  • top: Zodpovedá 0% pre zvislú polohu.
  • right: Rovná sa 100% pre vodorovnú polohu.
  • bottom: Zodpovedá 100% pre zvislú polohu.
  • left: Zodpovedá 0% pre vodorovnú polohu.
  • center: Rovná sa 50% pre vodorovnú polohu, ak vodorovná poloha nie je inak určená, alebo 50% pre zvislú polohu, ak je.
  • initial: Použije predvolené nastavenie vlastnosti, ktoré je 0% 0%.
  • inherit: Prijme mask-positionhodnotu rodiča.
  • unset: Odstráni prúd mask-positionz prvku.

Použitie viacerých hodnôt

Táto vlastnosť môže mať zoznam hodnôt pozícií masiek 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 polohu prvého obrázka, druhá hodnota určuje polohu druhého obrázka atď.

.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; )

Rôzna syntax

mask-position môže mať jednu, dve, tri alebo štyri hodnoty na určenie polohy vrstvy masky horizontálne a vertikálne.

Jedna hodnota

V prípade, že je nastavená jedna hodnota , bude sa to považovať za horizontálnu hodnotu a za vertikálnu hodnotu sa bude považovať center.

mask-position: 100px; /* 100px center */
Dve hodnoty

V prípade použitia párových hodnôt sa prvá považuje za vodorovnú hodnotu a druhá určuje polohu zvislej vrstvy.

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

Ak sú obe hodnoty kľúčové slová, potom je poradie kľúčových slov irelevantné:

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

Ale keď máme kombináciu kľúčového slova a dĺžky alebo percenta, na poradí záleží a prvá hodnota vždy zodpovedá vodorovnému posunutiu. Preto:

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

Ak sú zadané tri hodnoty, predpokladá sa, že chýbajúci posun je nula:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Štyri hodnoty

Štvorhodnotová syntax umožňuje určiť, na ktoré strany prvku umiestňujete masku relatívne (hodnoty 1 a 3), a potom vzdialenosť od týchto strán (hodnoty 2 a 4).

Ak teda chcete umiestniť masku 100 pixelov od spodnej časti prvku a 200 pixelov sprava, môžete urobiť nasledovné:

mask-position: bottom 100px right 200px;

Animačné masky

Je možné animovať pozíciu masky mask-sizepomocou animácie kľúčových snímok a prechodu CSS, napríklad takto:

.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 ďalšom ukážke animujeme pozíciu vrstvy masky pomocou animácie kľúčových snímok:

Ukážka

Zmeňte hodnotu položky mask-positionv nasledujúcej ukážke:

Podpora prehliadača

IE Hrana Firefox Chrome Safari Opera
Nie 18+ 53+ 4+ 3,2+ 15+
Android Chrome Android Firefox Prehliadač Android iOS Safari Opera Mobile
85+ 79+ 2,1+ 3,2+ 59+
Zdroj: caniuse

Viac informácií

  • Modul maskovania CSS úrovne 1 (návrh redaktora)
  • Orezávanie a maskovanie v CSS
  • Orezanie vs. maskovanie: Kedy použiť každý
  • # 185: Hranie sa s maskami CSS (video)