Maskstorlek - CSS-tricks

Anonim

I CSS anger egenskapen maskstorlek storleken på en masklagerbild. På många sätt fungerar det väldigt mycket som background-sizefastigheten.

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

Maskering låter dig visa utvalda delar av ett element medan du gömmer resten. Maskens storlek definieras av mask-sizeegenskapen.

I följande demo kan du spela med storleken på masklagrets bild:

Syntax

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Initialt värde: auto
  • Gäller för: Alla element. I SVG gäller det containerelement exklusive elementet, alla grafikelement och elementet
  • Ärvt: nej
  • Animationstyp: repeterbar lista

Det säger i princip att syntaxen accepterar ett bakgrundsstorleksvärde ( ) som antingen kan vara en eller två längder och / eller procentsatser ( ), inställt på autoeller ett av två nyckelord ( coveroch contain).

  • När två värden används anger det första värdet maskeringsbildens bredd och det andra värdet anger dess höjd .
  • När ett värde som inte innehåller eller täcker används, definierar det bredden på maskbilden och höjden antas vara auto.

Värden

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

Värdedefinitioner

  • : Ett giltigt och icke-negativt CSS längd, såsom px, em, remoch %, bland annat.
  • : Anger storleken på masklagrets bild som ett procentvärde i förhållande till maskpositioneringsområdet, vilket ställs in av värdet på mask-origin. Som standard är detta värde border-box, vilket innebär att det innehåller ramar, vaddering och innehåll i rutan.
  • auto: Maskebildens inneboende höjd och bredd används och för bilder som övertoningar som inte har inneboende dimensioner återges den i storleken på maskpositioneringsområdet.
  • contain: Skalar maskbilden samtidigt som den behåller dess inneboende proportion på ett sätt så att både dess bredd och höjd kan passa inuti maskpositioneringsområdet. För bilder som övertoningar som inte har inneboende dimensioner, återges den i storleken på maskpositioneringsområdet.
  • cover: Skalar maskeringsbilden och bibehåller dess inneboende proportion på ett sätt som både dess bredd och höjd helt kan täcka maskens positioneringsområde. För bilder som övertoningar som inte har inneboende dimensioner, återges den i storleken på maskpositioneringsområdet.
  • initial: Tillämpar egenskapens standardinställning, vilket är auto.
  • inherit: Antar förälderns maskstorleksvärde.
  • unset: Tar bort strömmen mask-sizefrån elementet.

Använda flera värden

Den här egenskapen kan ta en kommaseparerad lista med värden för maskstorlekar 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 storleken på den första bilden, det andra värdet anger storleken på den andra bilden och så vidare.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

det autovärde

Om mask-sizeegenskapens värde anges som auto, så här:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

... sedan skalar maskeringsbilden i motsvarande riktningar för att bibehålla sitt bildförhållande. Med det sagt kan vi få olika resultat beroende på bildens inneboende dimensioner och proportion.

Andel / dimension Inga inneboende dimensioner En inneboende dimension Båda inneboende dimensioner
Har andel Återges som om innehållet hade specificerats istället Återges i den storlek som bestäms av den ena dimensionen och andelen Återges i den storleken
Ingen andel Framställs i storleken på maskpositioneringsområdet Återges med den inneboende dimensionen och motsvarande dimension för maskpositioneringsområdet Ej tillämpligt

Om värdet av mask-sizeanges med autooch ett annat icke-automatiskt värde som följande:

.element ( mask-size: auto 200px; )

... då:

  • om bilden har en inneboende proportion beräknas det automatiska värdet med den angivna dimensionen och den inneboende proportionen.
  • om bilden inte har någon inneboende proportion blir autovärdet bildens motsvarande inneboende dimension om den existerar, och om den inte gör det blir auto motsvarande dimension för maskpositioneringsområdet.

Förståelse coverochcontain

Följande video förklarar hur innehålls- och omslagssökord fungerar. Observera att ett masklagers utgångsläge är mitt i positioneringsområdet:

Om bilden inte har något inneboende bildförhållande gör maskeringsbilden att specificera antingen omslaget eller innehålla storleken på maskens positioneringsområde.

Och precis vad är det en inneboende dimension och inneboende proportion?

Inneboende dimensioner är bredden och höjden på ett element och inneboende proportion är förhållandet mellan dem.

  • En bitmapp som ser ut som ett PNG-format, har alltid inneboende dimensioner och en inneboende proportion.
  • En vektorbild som ett SVG-format kan ha båda inneboende dimensioner. Därför har den också en inneboende andel. Det kan också ha en eller inga inneboende dimensioner och i båda fallen kan det ha eller inte ha en inneboende proportion.
  • Lutningar är som bilder utan inneboende dimensioner eller inneboende proportion.

Webbläsarstöd

IE Kant Firefox Krom Safari Opera
Nej 18+ 53+ Allt 4+ 70
Android Chrome Android Firefox Android-webbläsare iOS Safari Opera Mini
85+ 79+ 4.4+ Allt Allt
Källa: caniuse

Demo

Följande demo använder en längd för maskstorleken. Försök att ändra värdet till andra värden i koden och kontrollera resultatet.

Mer information

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