Maskas izmērs - CSS-triki

Anonim

CSS rekvizīts mask-size norāda maskas slāņa attēla lielumu. Daudzos veidos tas darbojas ļoti līdzīgi background-sizeīpašumam.

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

Maskēšana ļauj parādīt izvēlētās elementa daļas, paslēpjot pārējās. Maskas izmēru nosaka mask-sizeīpašums.

Šajā demonstrācijā jūs varat spēlēt ar maskas slāņa attēla izmēru:

Sintakse

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Sākotnējā vērtība: auto
  • Attiecas uz: visiem elementiem. SVG tas attiecas uz konteinera elementiem, izņemot elementu, visus grafiskos elementus un elementu
  • Mantots: nē
  • Animācijas veids: atkārtojams saraksts

Būtībā tas nozīmē, ka sintakse pieņem fona lieluma ( ) vērtību, kas var būt vai nu viens, vai divi garumi un / vai procenti ( ), kas iestatīti uz autovai viens no diviem atslēgvārdiem ( coverun contain).

  • Ja tiek izmantotas divas vērtības , pirmā vērtība norāda maskas attēla platumu , bet otrā vērtība - tās augstumu .
  • Ja tiek izmantota viena vērtība, kas nesatur vai neaptver vāku, tā nosaka maskas attēla platumu un tiek pieņemts, ka augstums ir auto.

Vērtības

/* 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ērtību definīcijas

  • : Jebkurš derīgs un nav negatīvs CSS garuma, piemēram px, em, remun %, cita starpā.
  • : Norāda maskas slāņa attēla lielumu kā procentuālo vērtību attiecībā pret maskas pozicionēšanas laukumu, kuru nosaka vērtība mask-origin. Pēc noklusējuma šī vērtība ir border-box, tas nozīmē, ka tajā ir ietvertas apmales, pildījums un lodziņa saturs.
  • auto: Tiek izmantots maskas attēla iekšējais augstums un platums, un tādiem attēliem kā gradienti, kuriem nav raksturīgo izmēru, tas tiek atveidots maskas pozicionēšanas apgabala lielumā.
  • contain: Mērogo maskas attēlu, vienlaikus saglabājot tā patieso proporciju tādā veidā, lai gan tā platums, gan augstums varētu ietilpt maskas pozicionēšanas zonā. Attēliem, piemēram, gradientiem, kuriem nav raksturīgo izmēru, tas tiek atveidots maskas pozicionēšanas apgabala lielumā.
  • cover: Mērogo maskas attēlu, vienlaikus saglabājot tā patieso proporciju tā, lai gan tā platums, gan augstums varētu pilnībā nosegt maskas pozicionēšanas zonu. Attēliem, piemēram, gradientiem, kuriem nav raksturīgo izmēru, tas tiek atveidots maskas pozicionēšanas apgabala lielumā.
  • initial: Piemēro īpašuma noklusējuma iestatījumu, kas ir auto.
  • inherit: Pieņem vecāka maskas lieluma vērtību.
  • unset: Noņem strāvu mask-sizeno elementa.

Vairāku vērtību izmantošana

Šis rekvizīts var ņemt komatu atdalītu vērtību sarakstu masku izmēriem, un katra vērtība tiek lietota attiecīgajam maskas slāņa attēlam, kas norādīts mask-imageīpašumā.

Šajā piemērā pirmā vērtība norāda pirmā attēla lielumu, otrā vērtība norāda otrā attēla lielumu utt.

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

autovērtība

Ja mask-sizerekvizīta vērtība ir norādīta autošādi:

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

... tad maskas attēls tiek mērogots attiecīgajos virzienos, lai saglabātu tā malu attiecību. Tas nozīmē, ka mēs varam iegūt dažādus rezultātus atkarībā no attēla raksturīgajiem izmēriem un proporcijas.

Proporcija / dimensija Nav raksturīgo izmēru Viena iekšējā dimensija Abas iekšējās dimensijas
Ir proporcija Tiek atveidots tā, it kā tā vietā būtu norādīts saturēt Tiek rādīts lielumā, ko nosaka šī viena dimensija un proporcija Tiek atveidots tādā izmērā
Nav proporcijas Tiek atveidots pēc maskas pozicionēšanas laukuma lieluma Tiek atveidots, izmantojot maskas pozicionēšanas zonas iekšējo izmēru un atbilstošo izmēru N / A

Ja vērtība mask-sizeir norādīta ar autocitu vērtību, kas nav automātiska, piemēram:

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

… Tad:

  • ja attēlam ir raksturīga proporcija , automātiskā vērtība tiek aprēķināta, izmantojot norādīto izmēru un patieso proporciju.
  • ja attēlam nav iekšējās proporcijas , automātiskā vērtība kļūst par attēla atbilstošo iekšējo dimensiju, ja tāda pastāv, un, ja tā nav, automātiskā būs attiecīgā maskas pozicionēšanas apgabala dimensija.

Izpratne coveruncontain

Šajā videoklipā ir paskaidrots, kā darbojas atslēgvārdi ietver un ietver. Ņemiet vērā, ka maskas slāņa sākotnējā pozīcija atrodas pozicionēšanas apgabala centrā:

Ja attēlam nav raksturīgā malu attiecība, tad, norādot vai nu segumu, vai arī ietvert, maskas attēls tiek atveidots maskas pozicionēšanas apgabala lielumā.

Un kāds ir heck iekšējais aspekts un proporcija?

Iekšējie izmēri ir elementa platums un augstums, un iekšējā proporcija ir to attiecība.

  • Bitkartes attēlam, piemēram, PNG formātam, vienmēr ir iekšējie izmēri un proporcija.
  • Vektora attēlam, piemēram, SVG formātam, var būt gan iekšējie izmēri. Tāpēc tam ir arī raksturīga proporcija. Tam var būt arī viena iekšējā dimensija vai tās nav, un abos gadījumos tā var būt vai var nebūt.
  • Gradienti ir kā attēli bez iekšējiem izmēriem vai proporcijas.

Pārlūkprogrammas atbalsts

IE Mala Firefox Chrome Safari Opera
Nē 18+ 53+ Viss 4+ 70
Android Chrome Android Firefox Android pārlūks iOS Safari Opera Mini
85+ 79+ 4.4+ Viss Viss
Avots: caniuse

Demonstrācija

Šajā demonstrācijā maskas izmēram tiek izmantots garums. Mēģiniet mainīt koda vērtību uz cita veida vērtībām un pārbaudiet rezultātu.

Vairāk informācijas

  • CSS maskēšanas modulis 1. līmenis
  • Nogriešana un maskēšana CSS
  • Nogriešana pret maskēšanu: kad katru lietot
  • # 185: Spēle ar CSS maskām (video)