Velikost maske - CSS-triki

Anonim

V CSS lastnost velikosti maske določa velikost slike sloja maske. V mnogih pogledih deluje zelo podobno kot background-sizelastnina.

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

Maskiranje omogoča prikaz izbranih delov elementa, medtem ko preostale skriva. Velikost maske je določena z mask-sizelastnostjo.

V naslednji predstavitvi se lahko poigrate z velikostjo slike sloja maske:

Sintaksa

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Začetna vrednost: samodejno
  • Velja za: Vsi elementi. V SVG velja za elemente vsebnika, razen elementa, vseh grafičnih elementov in elementa
  • Podedovano: ne
  • Vrsta animacije: ponovljiv seznam

To v bistvu pomeni, da sintaksa sprejema vrednost velikosti ozadja ( ), ki je lahko ena ali dve dolžini in / ali odstotki ( ), nastavljena na autoali eno od dveh ključnih besed ( coverin contain).

  • Ko sta uporabljeni dve vrednosti , prva vrednost določi širino slike maske, druga vrednost pa njeno višino .
  • Ko se uporabi ena vrednost, ki ne vsebuje ali pokriva, določi širino slike maske in domneva se, da je višina auto.

Vrednote

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

Opredelitve vrednosti

  • : Vsak veljaven in brez negativnih dolžina CSS, kot so px, em, remin %, med drugim.
  • : Podaja velikost slike sloja maske kot odstotno vrednost glede na območje pozicioniranja maske, ki je nastavljeno z vrednostjo mask-origin. Ta vrednost je privzeto, kar border-boxpomeni, da vsebuje obrobe, oblazinjenje in vsebino polja.
  • auto: Uporabi se lastna višina in širina slike maske, pri slikah, kot so prelivi, ki nimajo notranjih dimenzij, pa se upodobi v velikosti območja za pozicioniranje maske.
  • contain: Prilagodi sliko maske, hkrati pa ohrani njen notranji delež tako, da se lahko tako njena širina kot višina prilegata znotraj območja za pozicioniranje maske. Za slike, kot so prelivi, ki nimajo notranjih dimenzij, so upodobljene v velikosti območja za pozicioniranje maske.
  • cover: Prilagodi sliko maske, hkrati pa ohrani njen notranji delež tako, da lahko tako njena širina kot višina v celoti pokrijeta območje položaja maske. Za slike, kot so prelivi, ki nimajo notranjih dimenzij, so prikazane v velikosti območja za pozicioniranje maske.
  • initial: Uporabi privzeto nastavitev lastnosti, ki je auto.
  • inherit: Sprejme vrednost velikosti maske nadrejenega.
  • unset: Odstrani tok mask-sizeiz elementa.

Uporaba več vrednosti

Ta lastnost lahko sprejme ločen z vejicami seznam vrednosti za velikosti maske in vsaka vrednost se uporabi za ustrezno sliko sloja maske, določeno v mask-imagelastnosti.

V naslednjem primeru prva vrednost določa velikost prve slike, druga vrednost določa velikost druge slike itd.

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

autovrednost

Če je vrednost mask-sizelastnosti podana kot auto, takole:

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

… Nato se slika maske prilagodi v ustrezne smeri, da se ohrani razmerje stranic. Kljub temu lahko dobimo različne rezultate, odvisno od notranjih dimenzij in razmerja slike.

Delež / dimenzija Brez notranjih dimenzij Ena notranja dimenzija Obe notranji dimenziji
Ima delež Upodobljeno, kot da je namesto tega določeno vsebujejo Upodobljeno v velikosti, ki jo določita ena dimenzija in delež Upodobljeno v tej velikosti
Brez deleža Upodobljeno v velikosti območja za pozicioniranje maske Upodobljeno z lastno dimenzijo in ustrezno dimenzijo območja za pozicioniranje maske N / A

Če je vrednost mask-sizepodana z autoin drugo neavtomatsko vrednost, kot je naslednja:

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

… Potem:

  • če ima slika notranji delež , se samodejna vrednost izračuna z uporabo določene dimenzije in notranjega razmerja.
  • če slika nima notranjega sorazmerja , samodejna vrednost postane ustrezna notranja dimenzija slike, če obstaja, če pa ne, bo samodejna ustrezna dimenzija območja pozicioniranja maske.

Razumevanje coverincontain

Naslednji video razlaga, kako delujejo ključne besede vsebujejo in pokrivajo. Upoštevajte, da je začetni položaj plasti maske v središču območja pozicioniranja:

Če slika nima notranjega razmerja stranic, potem določitev pokrova ali vsebine upodobi sliko maske v velikosti območja za pozicioniranje maske.

In kaj za vraga sta notranja dimenzija in notranje razmerje?

Notranje dimenzije so širina in višina elementa, notranje razmerje pa je razmerje med njimi.

  • Slika bitne slike, kot je format PNG, ima vedno notranje dimenzije in notranji delež.
  • Vektorska slika, kot je format SVG, ima lahko notranji dimenziji. Zato ima tudi notranji delež. Lahko ima tudi eno ali nič notranjih dimenzij, v obeh primerih pa ima lahko ali pa tudi ne.
  • Prelivi so kot slike brez lastnih dimenzij ali notranjega razmerja.

Podpora brskalnika

IE Rob Firefox Chrome Safari Opera
Ne 18+ 53+ Vse 4+ 70
Android Chrome Android Firefox Brskalnik Android iOS Safari Opera Mini
85+ 79+ 4,4+ Vse Vse
Vir: kanius

Demo

Naslednja predstavitev uporablja dolžino za velikost maske. Poskusite spremeniti vrednost v druge vrste vrednosti v kodi in preverite rezultat.

Več informacij

  • Modul maskiranja CSS 1. stopnja
  • Izrezovanje in maskiranje v CSS
  • Clipping vs. Masking: Kdaj uporabiti vsako
  • # 185: Igranje z maskami CSS (video)