Masker-positie - CSS-trucs

Anonim

In CSS mask-positionspecificeert de eigenschap de beginpositie van een maskerlaagafbeelding ten opzichte van het maskerpositiegebied. Het werkt als het background-positioneigendom.

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

Met maskering kunt u geselecteerde delen van een element weergeven en de rest verbergen. In de volgende demo kunt u de positie van de maskerlaagafbeelding wijzigen:

Syntaxis

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Beginwaarde: 0% 0%
  • Geldt voor: alle elementen. In SVG is het van toepassing op containerelementen met uitzondering van het element, alle grafische elementen en het element.
  • Overgenomen: nee
  • Berekende waarde: bestaande uit: twee sleutelwoorden die de oorsprong vertegenwoordigen en twee offsets van die oorsprong, elk gegeven als een absolute lengte (indien gegeven a ), anders als een percentage.
  • Animatietype: herhaalbare lijst

Waarden

A kan worden gespecificeerd in termen van verschoven trefwoorden ( top, left, bottom, righten center), percentages en lengtewaarden over de randen van het element, vergelijkbaar met de CSS background-positioneigenschap.

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

Waarde definities

  • ​pxemrem%
  • ​
  • top​
  • right​
  • bottom​
  • left​
  • center​
  • initial​
  • inherit​mask-position
  • unset​mask-position

Meerdere waarden gebruiken

Deze eigenschap kan een door komma's gescheiden lijst met waarden voor maskerposities aannemen en elke waarde wordt toegepast op een corresponderende maskerlaagafbeelding die in de mask-imageeigenschap is gespecificeerd . In het volgende voorbeeld specificeert de eerste waarde de positie van de eerste afbeelding, specificeert de tweede waarde de positie van de tweede afbeelding, enzovoort.

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

Verschillende syntaxis

mask-position kan een, twee, drie of vier waarden aannemen om de positie van de maskerlaag horizontaal en verticaal te specificeren.

Enkele waarde

Als een enkele waarde is ingesteld, wordt dat genomen als de horizontale waarde en wordt aangenomen dat de verticale waarde dat is center.

mask-position: 100px; /* 100px center */
Twee waarden

In het geval dat paarwaarden worden gebruikt, wordt de eerste genomen als de horizontale waarde en de tweede specificeert de positie van de make-laag verticaal.

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

Als beide waarden trefwoorden zijn, is de volgorde van de trefwoorden niet relevant:

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

Maar als we een combinatie van trefwoord en lengte of percentage hebben, is de volgorde van belang en komt de eerste waarde altijd overeen met de horizontale offset. Daarom:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Drie waarden

Als er drie waarden worden opgegeven, wordt aangenomen dat de ontbrekende offset nul is:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Vier waarden

Met een syntaxis van vier waarden kunt u specificeren aan welke zijden van het element u het masker plaatst ten opzichte van (waarden 1 en 3), en vervolgens de afstand tot die zijden (waarden 2 en 4).

Dus als je het masker 100 px vanaf de onderkant van het element en 200 px vanaf de rechterkant wilt plaatsen, kun je het volgende doen:

mask-position: bottom 100px right 200px;

Animerende maskers

Het is mogelijk om maskerpositie te animeren en mask-sizekeyframe-animatie en CSS-overgangen te gebruiken, zoals het volgende:

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

In deze volgende demo animeren we de positie van de maskerlaag met behulp van keyframe-animatie:

Demo

Verander de waarde voor mask-positionin de volgende demo:

Browser-ondersteuning

D.W.Z Rand Firefox Chrome Safari Opera
Nee 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Bron: caniuse

Meer informatie

  • CSS Masking Module Level 1 (Editor's Draft)
  • Knippen en maskeren in CSS
  • Clipping vs. maskeren: wanneer elk te gebruiken
  • # 185: Spelen met CSS-maskers (video)