Maske-position - CSS-tricks

Anonim

I CSS angiver mask-positionegenskaben den oprindelige position for et maskerlagsbillede i forhold til maskepositionsområdet. Det fungerer som background-positionejendommen.

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

Maskering giver dig mulighed for at vise udvalgte dele af et element, mens du gemmer resten. I den følgende demo kan du ændre placeringen af ​​maske lagbilledet:

Syntaks

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Startværdi: 0% 0%
  • Gælder for: alle elementer. I SVG gælder det for containerelementer eksklusive elementet, alle grafiske elementer og elementet.
  • Arvet: nej
  • Beregnet værdi: bestående af: to nøgleord, der repræsenterer oprindelsen, og to forskydninger fra den oprindelse, hver angivet som en absolut længde (hvis givet a ), ellers i procent.
  • Animationstype: liste, der kan gentages

Værdier

En kan specificeres i form af forskudte søgeord ( top, left, bottom, right, og center), procenter og længde værdier vedrørende kanterne af elementet, svarende til CSS background-positionejendom.

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

Værdidefinitioner

  • : Enhver gyldigt CSS længde (såsom px, em, remog %, blandt andre), som vil angive, hvor langt kanten af masken billede er fra den tilsvarende kant af elementet.
  • : Angiver placeringen af ​​maskerlagsbillede som en procentværdi i forhold til maskepositioneringsområdet minus maskebilledets størrelse.
  • top: Svarer til 0% for den lodrette position.
  • right: Svarer til 100% for den vandrette position.
  • bottom: Svarer til 100% for den lodrette position.
  • left: Svarer til 0% for den vandrette position.
  • center: Svarer til 50% for den vandrette position, hvis den vandrette position ikke er angivet på anden måde, eller 50% for den lodrette position, hvis den er.
  • initial: Anvender egenskabens standardindstilling, som er 0% 0%.
  • inherit: Vedtager mask-positionværdien af ​​den overordnede.
  • unset: Fjerner strømmen mask-positionfra elementet.

Brug af flere værdier

Denne egenskab kan tage en komma-adskilt liste over værdier for maskepositioner, og hver værdi anvendes på et tilsvarende maskerlagsbillede, der er angivet i mask-imageegenskaben. I det følgende eksempel specificerer den første værdi placeringen af ​​det første billede, den anden værdi angiver placeringen af ​​det andet billede osv.

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

Forskellig syntaks

mask-position kan tage en, to, tre eller fire værdier for at angive placeringen af ​​masklaget vandret og lodret.

Enkelt værdi

Hvis der indstilles en enkelt værdi , tages den som den vandrette værdi, og den lodrette værdi antages at være center.

mask-position: 100px; /* 100px center */
To værdier

I tilfælde af brug af parværdier tages den første som den vandrette værdi, og den anden specificerer fabrikationslagets position lodret.

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

Hvis begge værdier er nøgleord, er rækkefølgen af ​​nøgleordene irrelevant:

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

Men når vi har en kombination af nøgleord og længde eller procentdel, betyder ordren, og den første værdi svarer altid til den vandrette forskydning. Derfor:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Tre værdier

Hvis der gives tre værdier, antages den manglende forskydning at være nul:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Fire værdier

En syntaks med fire værdier giver dig mulighed for at specificere, hvilke sider af elementet du placerer masken i forhold til (værdier 1 og 3) og derefter afstanden fra disse sider (værdier 2 og 4).

Så hvis du vil placere masken 100px fra bunden af ​​elementet og 200px fra højre, kan du gøre som følger:

mask-position: bottom 100px right 200px;

Animerende masker

Det er muligt at animere maskeposition og mask-sizebruge keyframe-animation og CSS-overgang, som følgende:

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

I denne næste demo animerer vi placeringen af ​​masklaget ved hjælp af keyframe-animation:

Demo

Skift værdien for mask-positioni følgende demo:

Browsersupport

IE Edge Firefox Chrome Safari Opera
Ingen 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Kilde: caniuse

Mere information

  • CSS Masking Module Level 1 (Editor's Draft)
  • Klipning og maskering i CSS
  • Klipning vs. maskering: Hvornår skal man bruge hver
  • # 185: Afspilning med CSS-masker (video)