Položaj maske - CSS-triki

Anonim

V CSS mask-positionlastnost določa začetni položaj slike sloja maske glede na območje položaja maske. Deluje kot background-positionlastnina.

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

Maskiranje omogoča prikaz izbranih delov elementa, medtem ko preostale skriva. V naslednji predstavitvi lahko spremenite položaj slike maske:

Sintaksa

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Začetna vrednost: 0% 0%
  • Velja za: vse elemente. V SVG velja za elemente vsebnika, razen elementa, vseh grafičnih elementov in elementa.
  • Podedovano: ne
  • Izračunana vrednost: sestavljena iz: dveh ključnih besed, ki predstavljata izvor in dveh odmikov od tega izvora, vsaka je podana kot absolutna dolžina (če je dana a ), sicer pa v odstotkih.
  • Vrsta animacije: ponovljiv seznam

Vrednote

Se lahko določi glede na ofsetnih ključnih besed ( top, left, bottom, right, in center), v odstotkih, in dolžina vrednosti glede na robove elementa, podobno CSS background-positionpremoženja.

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

Opredelitve vrednosti

  • : Vsak veljaven dolžina CSS (na primer px, em, remin %, med drugim), ki določa, kako daleč je rob maske slike od ustreznega robu elementa.
  • : Določa položaj slike sloja maske kot odstotno vrednost glede na območje pozicioniranja maske minus velikost slike maske.
  • top: Enakovredno 0% za navpični položaj.
  • right: Enakovredno 100% za vodoravni položaj.
  • bottom: Enakovredno 100% za navpični položaj.
  • left: Enakovredno 0% za vodoravni položaj.
  • center: Enakovredno 50% za vodoravni položaj, če vodoravni položaj ni drugače določen, ali 50% za navpični položaj, če je.
  • initial: Uporabi privzeto nastavitev lastnosti, ki je 0% 0%.
  • inherit: Sprejme mask-positionvrednost nadrejenega.
  • unset: Odstrani tok mask-positioniz elementa.

Uporaba več vrednosti

Ta lastnost lahko zapiše seznam vrednosti, ločenih z vejico, za položaje maske in vsaka vrednost se uporabi za ustrezno sliko sloja maske, določeno v mask-imagelastnosti. V naslednjem primeru prva vrednost določa položaj prve slike, druga vrednost določa položaj druge slike itd.

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

Različna skladnja

mask-position lahko vzame eno, dve, tri ali štiri vrednosti, da določi položaj plasti maske vodoravno in navpično.

Posamezna vrednost

V primeru, da je nastavljena ena vrednost , se to vzame za vodoravno vrednost in vertikalna vrednost se domneva center.

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

V primeru uporabe parnih vrednosti se prva vzame za vodoravno vrednost, druga pa določi položaj sloja izdelave navpično.

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

Če sta obe vrednosti ključni besedi, potem vrstni red ključnih besed ni pomemben:

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

Ko pa imamo kombinacijo ključne besede in dolžine ali odstotka, je vrstni red pomemben in prva vrednost vedno ustreza vodoravnemu odmiku. Zato:

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

Če so podane tri vrednosti, se domneva, da manjkajoči odmik znaša nič:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Štiri vrednosti

Sintaksa s štirimi vrednostmi vam omogoča, da določite, na katere strani elementa namestite masko glede na vrednosti (vrednosti 1 in 3), in nato razdaljo od teh strani (vrednosti 2 in 4).

Torej, če želite postaviti masko 100px od dna elementa in 200px od desne, lahko storite naslednje:

mask-position: bottom 100px right 200px;

Animirajoče maske

Možno je animirati položaj maske in mask-sizeuporabiti animacijo ključnih sličic in prehod CSS, na primer naslednje:

.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 tej naslednji predstavitvi animiramo položaj sloja maske z uporabo animacije ključnih okvirjev:

Demo

Spremenite vrednost za mask-positionv naslednji predstavitvi:

Podpora brskalnika

IE Rob Firefox Chrome Safari Opera
Ne 18+ 53+ 4+ 3,2+ 15+
Android Chrome Android Firefox Brskalnik Android iOS Safari Opera Mobile
85+ 79+ 2.1+ 3,2+ 59+
Vir: kanius

Več informacij

  • Modul za maskiranje CSS 1. stopnja (urednikov osnutek)
  • Izrezovanje in maskiranje v CSS
  • Clipping vs. Masking: Kdaj uporabiti vsako
  • # 185: Igranje z maskami CSS (video)