Maske-størrelse - CSS-triks

Anonim

I CSS spesifiserer egenskapen maskestørrelse størrelsen på et maskeringslagsbilde. På mange måter fungerer det veldig mye som background-sizeeiendommen.

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

Maskering lar deg vise utvalgte deler av et element mens du gjemmer resten. Størrelsen på masken er definert av mask-sizeeiendommen.

I den følgende demoen kan du leke med størrelsen på maskelagbildet:

Syntaks

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Startverdi: auto
  • Gjelder: Alle elementer. I SVG gjelder det containerelementer unntatt elementet, alle grafikkelementer og elementet
  • Arvet: nei
  • Animasjonstype: repeterbar liste

Det sier i utgangspunktet at syntaksen godtar en bakgrunnsstørrelse ( ) -verdi som enten kan være en eller to lengder og / eller prosenter ( ), satt til autoeller ett av to nøkkelord ( coverog contain).

  • Når to verdier brukes, angir den første verdien bredden på maskebildet, og den andre verdien angir høyden .
  • Når en verdi som ikke inneholder eller dekker brukes, definerer den bredden på maskebildet, og høyden antas å være auto.

Verdier

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

Verdidefinisjoner

  • : Enhver gyldig og ikke-negative CSS lengde, for eksempel px, em, remog %, blant andre.
  • : Spesifiserer størrelsen på maskelagets bilde som en prosentverdi i forhold til maskeposisjoneringsområdet, som er satt av verdien av mask-origin. Som standard er denne verdien border-box, noe som betyr at den inneholder rammer, polstring og innhold i boksen.
  • auto: Den innebygde høyden og bredden på maskebildet blir brukt, og for bilder som gradienter som ikke har indre dimensjoner, blir det gjengitt i størrelsen på maskeposisjoneringsområdet.
  • contain: Skalerer maskebildet mens den bevarer den indre proporsjonen på en måte som både bredden og høyden kan passe inn i maskeposisjoneringsområdet. For bilder som graderinger som ikke har egenmål, blir den gjengitt på størrelse med maskeposisjoneringsområdet.
  • cover: Skalerer maskebildet mens den bevarer den indre proporsjonen på en måte som både bredden og høyden helt kan dekke maskeposisjoneringsområdet. For bilder som graderinger som ikke har egenmål, blir den gjengitt på størrelse med maskeposisjoneringsområdet.
  • initial: Bruker egenskapens standardinnstilling, som er auto.
  • inherit: Vedtar maskeringsverdien til foreldrene.
  • unset: Fjerner strømmen mask-sizefra elementet.

Bruke flere verdier

Denne egenskapen kan ta en kommaseparert liste over verdier for maskestørrelser, og hver verdi blir brukt på et tilsvarende maskelagbilde spesifisert i mask-imageegenskapen.

I det følgende eksemplet spesifiserer den første verdien størrelsen på det første bildet, den andre verdien spesifiserer størrelsen på det andre bildet og så videre.

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

den autoverdi

Hvis verdien av mask-sizeeiendommen er spesifisert som auto, slik:

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

... deretter skaleres maskebildet i tilsvarende retninger for å opprettholde sideforholdet. Når det er sagt, kan vi få forskjellige resultater, avhengig av bildets indre dimensjoner og proporsjon.

Andel / dimensjon Ingen iboende dimensjoner En iboende dimensjon Begge iboende dimensjoner
Har andel Gjengitt som om inneholder hadde blitt spesifisert i stedet Gjengitt i størrelsen bestemt av den ene dimensjonen og andelen Gjengitt i den størrelsen
Ingen andel Gjengitt på størrelse med maskeposisjoneringsområdet Gjengitt ved hjelp av den indre dimensjonen og den tilsvarende dimensjonen til maskeposisjoneringsområdet Ikke relevant

Hvis verdien av mask-sizeer spesifisert med autoog en annen ikke-automatisk verdi som følgende:

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

… deretter:

  • Hvis bildet har en egen proporsjon , blir den automatiske verdien beregnet ved hjelp av den angitte dimensjonen og den indre proporsjonen.
  • Hvis bildet ikke har noen egen proporsjon , blir autoverdien bildets tilsvarende indre dimensjon hvis den eksisterer, og hvis den ikke gjør det, vil auto være den tilsvarende dimensjonen til maskeposisjoneringsområdet.

Forståelse coverogcontain

Følgende video forklarer hvordan søkeordene inneholder og dekker fungerer. Merk at utgangsposisjonen til et maskelag er midt i posisjoneringsområdet:

Hvis bildet ikke har noe sideforhold, vil det å spesifisere omslaget eller inneholde gjengi maskebildet i størrelsen på maskeposisjoneringsområdet.

Og akkurat hva pokker er en egen dimensjon og en egen proporsjon?

Iboende dimensjoner er bredden og høyden på et element, og den indre andelen er forholdet mellom dem.

  • En bitmap som et PNG-format, har alltid indre dimensjoner og en egen proporsjon.
  • Et vektorbilde som et SVG-format, kan ha begge indre dimensjoner. Derfor har den også en egen proporsjon. Det kan også ha en eller ingen indre dimensjoner, og i begge tilfeller kan det ha eller ikke ha en egen proporsjon.
  • Graderinger er som bilder uten indre dimensjoner eller egen proporsjon.

Nettleserstøtte

DVS Kant Firefox Chrome Safari Opera
Nei 18+ 53+ Alle 4+ 70
Android Chrome Android Firefox Android-nettleser iOS Safari Opera Mini
85+ 79+ 4.4+ Alle Alle
Kilde: caniuse

Demo

Følgende demo bruker en lengde for maskestørrelsen. Prøv å endre verdien til andre typer verdier i koden og sjekk resultatet.

Mer informasjon

  • CSS Masking Module Nivå 1
  • Klipping og maskering i CSS
  • Klipping mot maskering: Når skal du bruke hver
  • # 185: Spiller med CSS-masker (video)