Maskposition - CSS-tricks

Anonim

I CSS mask-positionspecificerar egenskapen den ursprungliga positionen för en masklagerbild i förhållande till maskpositionsområdet. Det fungerar som background-positionfastigheten.

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

Maskering låter dig visa utvalda delar av ett element medan du gömmer resten. I följande demo kan du ändra positionen för masklagrets bild:

Syntax

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Ursprungligt värde: 0% 0%
  • Gäller för: alla element. I SVG gäller det containerelement exklusive elementet, alla grafiska element och elementet.
  • Ärvt: nej
  • Beräknat värde: bestående av: två nyckelord som representerar ursprunget och två förskjutningar från det ursprunget, var och en angiven som en absolut längd (om den ges a ), annars i procent.
  • Animationstyp: repeterbar lista

Värden

A kan specificeras i termer av offset nyckelord ( top, left, bottom, right, och center), procenttal, och längdvärden avseende elementets kanter, liknande CSS background-positionegenskapen.

/* 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ärdedefinitioner

  • : Alla giltig CSS längd (såsom px, em, remoch %, bland andra) som kommer att ange hur långt kanten av maskbilden är från den motsvarande kanten av elementet.
  • : Anger positionen för masklagrets bild som ett procentvärde i förhållande till maskpositioneringsområdet minus maskbildens storlek.
  • top: Motsvarar 0% för den vertikala positionen.
  • right: Motsvarar 100% för den horisontella positionen.
  • bottom: Motsvarar 100% för den vertikala positionen.
  • left: Motsvarar 0% för den horisontella positionen.
  • center: Motsvarar 50% för den horisontella positionen om den horisontella positionen inte anges på annat sätt, eller 50% för den vertikala positionen, om den är.
  • initial: Tillämpar egenskapens standardinställning, som är 0% 0%.
  • inherit: Antar mask-positionvärdet på föräldern.
  • unset: Tar bort strömmen mask-positionfrån elementet.

Använda flera värden

Den här egenskapen kan ta en kommaseparerad lista med värden för maskpositioner och varje värde tillämpas på en motsvarande masklagerbild som anges i mask-imageegenskapen. I följande exempel anger det första värdet positionen för den första bilden, det andra värdet anger positionen för den andra bilden och så vidare.

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

Olika syntax

mask-position kan ta ett, två, tre eller fyra värden för att ange masklagrets position horisontellt och vertikalt.

Enkelt värde

Om ett enda värde ställs in, tas det som det horisontella värdet och det vertikala värdet antas vara center.

mask-position: 100px; /* 100px center */
Två värden

Om du använder parvärden tas det första som det horisontella värdet, och det andra anger fabriksskiktets position vertikalt.

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

Om båda värdena är nyckelord är ordningen på nyckelorden irrelevant:

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

Men när vi har en kombination av nyckelord och längd eller procent, är ordningen viktig och det första värdet motsvarar alltid den horisontella förskjutningen. Därför:

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

Om tre värden ges antas den saknade förskjutningen vara noll:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Fyra värden

En syntax med fyra värden låter dig ange vilka sidor av elementet du placerar masken i förhållande till (värden 1 och 3) och sedan avståndet från dessa sidor (värden 2 och 4).

Så, om du vill placera masken 100 pixlar från botten av elementet och 200 pixlar från höger, kan du göra följande:

mask-position: bottom 100px right 200px;

Animerande masker

Det är möjligt att animera maskposition och mask-sizeanvända keyframe-animering och CSS-övergång, som följande:

.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 denna nästa demo animerar vi positionen för masklagret med hjälp av keyframe-animering:

Demo

Ändra värdet för mask-positioni följande demo:

Webbläsarstöd

IE Kant Firefox Krom Safari Opera
Nej 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Android-webbläsare iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Källa: caniuse

Mer information

  • CSS Masking Module Level 1 (Editor's Draft)
  • Klippning och maskering i CSS
  • Klippning mot maskering: När ska varje användas?
  • # 185: Spelar med CSS-masker (video)