Masca-pozitie - CSS-Tricks

Anonim

În CSS, mask-positionproprietatea specifică poziția inițială a unei imagini a stratului de mască în raport cu zona de poziție a măștii. Funcționează ca background-positionproprietatea.

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

Mascare vă permite să afișați părțile selectate ale unui element în timp ce ascundeți restul. În următoarea demonstrație, puteți schimba poziția imaginii stratului de mască:

Sintaxă

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Valoarea initiala: 0% 0%
  • Se aplică tuturor elementelor. În SVG, se aplică elementelor containerului, cu excepția elementului, a tuturor elementelor grafice și a elementului.
  • Moștenit: nu
  • Valoare calculată: constând din: două cuvinte cheie care reprezintă originea și două compensări de la acea origine, fiecare dată ca lungime absolută (dacă este dată a ), altfel ca procent.
  • Tipul de animație: listă repetabilă

Valori

O pot fi specificate în termeni de cuvinte cheie offset ( top, left, bottom, right, si center), procente, și valori de lungime în ceea ce privește marginile elementului, similar cu CSS background-positionproprietate.

/* 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;

Definiții de valoare

  • : Orice lungime valid CSS (cum ar fi px, em, remși %, printre altele) , care va specifica cât de departe marginea imaginii masca este de la marginea corespunzătoare a elementului.
  • : Specifică poziția imaginii stratului de mască ca valoare procentuală în raport cu zona de poziționare a măștii minus dimensiunea imaginii măștii.
  • top: Echivalent cu 0% pentru poziția verticală.
  • right: Echivalent cu 100% pentru poziția orizontală.
  • bottom: Echivalent cu 100% pentru poziția verticală.
  • left: Echivalent cu 0% pentru poziția orizontală.
  • center: Echivalent cu 50% pentru poziția orizontală dacă poziția orizontală nu este specificată altfel sau 50% pentru poziția verticală, dacă este.
  • initial: Aplică setarea implicită a proprietății, care este 0% 0%.
  • inherit: Adoptă mask-positionvaloarea părintelui.
  • unset: Elimină curentul mask-positiondin element.

Folosind valori multiple

Această proprietate poate lua o listă de valori separate prin virgulă pentru pozițiile măștii și fiecare valoare este aplicată unei imagini corespunzătoare a stratului de mască specificată în mask-imageproprietate. În exemplul următor, prima valoare specifică poziția primei imagini, a doua valoare specifică poziția celei de-a doua imagini și așa mai departe.

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

Sintaxă diferită

mask-position poate lua una, două, trei sau patru valori pentru a specifica poziția stratului de mască orizontal și vertical.

Valoare unică

În cazul în care este setată o singură valoare , aceasta este luată ca valoare orizontală și se presupune că valoarea verticală este center.

mask-position: 100px; /* 100px center */
Două valori

În cazul utilizării valorilor perechii, prima este luată ca valoare orizontală, iar a doua specifică poziția stratului make vertical.

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

Dacă ambele valori sunt cuvinte cheie, atunci ordinea cuvintelor cheie este irelevantă:

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

Dar atunci când avem o combinație de cuvinte cheie și lungime sau procent, ordinea contează și prima valoare corespunde întotdeauna offsetului orizontal. Prin urmare:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Trei valori

Dacă sunt date trei valori, decalajul lipsă se presupune a fi zero:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Patru valori

O sintaxă cu patru valori vă permite să specificați la care laturi ale elementului poziționați masca față de (valorile 1 și 3), apoi distanța de la aceste laturi (valorile 2 și 4).

Deci, dacă doriți să poziționați masca 100px din partea de jos a elementului și 200px din dreapta, puteți face următoarele:

mask-position: bottom 100px right 200px;

Măști animate

Este posibil să animați poziția măștii și să mask-sizefolosiți animația cadrului cheie și tranziția CSS, cum ar fi următoarele:

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

În următoarea demonstrație, animăm poziția stratului de mască folosind animația cadrului cheie:

Demo

Modificați valoarea pentru mask-positionurmătoarea demonstrație:

Suport pentru browser

IE Margine Firefox Crom Safari Operă
Nu Peste 18 ani Peste 53 de ani 4+ 3.2+ 15+
Android Chrome Android Firefox Browser Android Safari iOS Opera Mobile
Peste 85 de ani Peste 79 de ani 2.1+ 3.2+ Peste 59 de ani
Sursa: caniuse

Mai multe informatii

  • Modulul de mascare CSS Nivelul 1 (Proiectul editorului)
  • Decupare și mascare în CSS
  • Decupare vs. Mascare: Când să le folosiți pe fiecare
  • # 185: Joc cu măști CSS (video)