Maske-størrelse - CSS-tricks

Anonim

I CSS angiver maskestørrelsesegenskaben størrelsen på et maskerlagsbillede. På mange måder fungerer det meget som background-sizeejendommen.

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

Maskering giver dig mulighed for at vise udvalgte dele af et element, mens du gemmer resten. Størrelsen på masken er defineret af mask-sizeejendommen.

I den følgende demo kan du lege med størrelsen på maskeringsbilledet:

Syntaks

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Startværdi: auto
  • Gælder for: Alle elementer. I SVG gælder det for containerelementer eksklusive elementet, alle grafiske elementer og elementet
  • Arvet: nej
  • Animationstype: liste, der kan gentages

Det siger grundlæggende, at syntaksen accepterer en baggrundsstørrelsesværdi ( ), der enten kan være en eller to længder og / eller procentdele ( ), indstillet til autoeller et af to nøgleord ( coverog contain).

  • Når der bruges to værdier , angiver den første værdi bredden på maskebilledet, og den anden værdi angiver dens højde .
  • Når der bruges en værdi , der ikke indeholder eller dækker, definerer den bredden på maskebilledet, og højden antages at være auto.

Værdier

/* 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ærdidefinitioner

  • : Enhver gyldig og ikke-negativ CSS længde, såsom px, em, remog %, blandt andre.
  • : Angiver størrelsen på maskeringsbilledet som en procentværdi i forhold til maskepositioneringsområdet, der er indstillet af værdien på mask-origin. Denne værdi er som standard, hvilket border-boxbetyder at den indeholder rammer, polstring og indhold i feltet.
  • auto: Den iboende højde og bredde på maskebilledet bruges, og for billeder som gradienter, der ikke har iboende dimensioner, gengives det i størrelsen af ​​maskepositioneringsområdet.
  • contain: Skalerer maskebilledet, mens det bevarer dets indre forhold på en måde, så både bredden og højden kan passe inden i maskepositioneringsområdet. For billederne som gradienter, der ikke har iboende dimensioner, gengives det i størrelsen af ​​maskepositioneringsområdet.
  • cover: Skalerer maskebilledet, mens det opretholder dets indre forhold på en måde, så både bredden og højden helt kan dække maskepositioneringsområdet. For billederne som gradienter, der ikke har iboende dimensioner, gengives det i størrelsen af ​​maskepositioneringsområdet.
  • initial: Anvender egenskabens standardindstilling, som er auto.
  • inherit: Vedtager forældrenes maskestørrelsesværdi.
  • unset: Fjerner strømmen mask-sizefra elementet.

Brug af flere værdier

Denne egenskab kan tage en komma-adskilt liste over værdier for maskerstørrelser, og hver værdi anvendes på et tilsvarende maskerlagsbillede, der er angivet i mask-imageegenskaben.

I det følgende eksempel angiver den første værdi størrelsen på det første billede, den anden værdi angiver størrelsen på det andet billede osv.

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

den autoværdi

Hvis mask-sizeejendommens værdi er angivet som autosådan:

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

... derefter skaleres maskebilledet i de tilsvarende retninger for at opretholde dets billedformat. Når det er sagt, kan vi få forskellige resultater afhængigt af billedets iboende dimensioner og andel.

Andel / dimension Ingen iboende dimensioner Én iboende dimension Begge iboende dimensioner
Har andel Gengivet som om indeholdet var blevet specificeret i stedet Gengivet i størrelsen bestemt af den ene dimension og andelen Gengivet i den størrelse
Ingen andel Gengivet på størrelse med maskepositioneringsområdet Gengivet ved hjælp af den iboende dimension og den tilsvarende dimension af maskepositioneringsområdet Ikke relevant

Hvis værdien af mask-sizeer angivet med autoog en anden ikke-automatisk værdi som følgende:

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

… derefter:

  • hvis billedet har en indre del , beregnes den automatiske værdi ved hjælp af den angivne dimension og den indre del.
  • hvis billedet ikke har nogen indre proportion , bliver auto-værdien billedets tilsvarende indre dimension, hvis den findes, og hvis den ikke gør det, vil auto være den tilsvarende dimension for maskepositioneringsområdet.

Forståelse coverogcontain

Følgende video forklarer, hvordan nøgleordene indeholder og omslag fungerer. Bemærk, at maskerlagets udgangsposition er i midten af ​​positioneringsområdet:

Hvis billedet ikke har noget iboende billedformat, gengiver angivelse af enten dækning eller indhold gengivelse af maskebilledet i størrelsen af ​​maskepositioneringsområdet.

Og hvad er det iboende en indre dimension og en indre andel?

Iboende dimensioner er bredden og højden af ​​et element, og den indre del er forholdet mellem dem.

  • En bitmap, der kan forestille sig et PNG-format, har altid iboende dimensioner og en iboende andel.
  • Et vektorbillede som et SVG-format kan have begge indre dimensioner. Derfor har den også en iboende andel. Det kan også have en eller ingen iboende dimensioner, og i begge tilfælde har den måske eller måske ikke en indre andel.
  • Forløb er som billeder uden iboende dimensioner eller indre proportion.

Browsersupport

IE Edge Firefox Chrome Safari Opera
Ingen 18+ 53+ Alle 4+ 70
Android Chrome Android Firefox Android-browser iOS Safari Opera Mini
85+ 79+ 4.4+ Alle Alle
Kilde: caniuse

Demo

Den følgende demo bruger en længde til maskerstørrelsen. Prøv at ændre værdien til andre typer værdier i koden, og kontroller resultatet.

Mere information

  • CSS Masking Module niveau 1
  • Klipning og maskering i CSS
  • Klipning vs. maskering: Hvornår skal man bruge hver
  • # 185: Afspilning med CSS-masker (video)