Masca-dimensiune - CSS-Tricks

Anonim

În CSS, proprietatea de dimensiune mască specifică dimensiunea unei imagini de strat de mască. În multe privințe, funcționează foarte mult ca background-sizeproprietatea.

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

Mascare vă permite să afișați părțile selectate ale unui element în timp ce ascundeți restul. Dimensiunea măștii este definită de mask-sizeproprietate.

În următoarea demonstrație puteți juca cu dimensiunea imaginii stratului de mască:

Sintaxă

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Valoare inițială: auto
  • Se aplică la: Toate elementele. În SVG, se aplică elementelor containerului, cu excepția elementului, a tuturor elementelor grafice și a elementului
  • Moștenit: nu
  • Tipul de animație: listă repetabilă

Practic, se spune că sintaxa acceptă o valoare a dimensiunii fundalului ( ) care poate fi una sau două lungimi și / sau procente ( ), setată la auto, sau unul dintre cele două cuvinte cheie ( coverși contain).

  • Când se utilizează două valori , prima valoare specifică lățimea imaginii măștii, iar a doua valoare specifică înălțimea acesteia .
  • Când se folosește o valoare care nu conține sau acoperă, aceasta definește lățimea imaginii măștii și se presupune că înălțimea este auto.

Valori

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

Definiții de valoare

  • : Orice lungime valid CSS și non-negativ, cum ar fi px, em, remși %, printre altele.
  • : Specifică dimensiunea imaginii stratului de mască ca valoare procentuală în raport cu zona de poziționare a măștii, care este setată de valoarea mask-origin. În mod implicit, această valoare este border-box, ceea ce înseamnă că conține margini, umplutură și conținutul casetei.
  • auto: Se utilizează înălțimea și lățimea intrinsecă a imaginii măștii și, pentru imagini precum gradienții care nu au dimensiuni intrinseci, este redată la dimensiunea zonei de poziționare a măștii.
  • contain: Scalează imaginea măștii păstrându-și proporția intrinsecă într-un mod în care atât lățimea cât și înălțimea acesteia să se potrivească în interiorul zonei de poziționare a măștii. Pentru imaginile precum gradienții care nu au dimensiuni intrinseci, acesta este redat la dimensiunea zonei de poziționare a măștii.
  • cover: Scalează imaginea măștii păstrându-și proporția intrinsecă într-un mod în care atât lățimea cât și înălțimea acesteia pot acoperi în întregime zona de poziționare a măștii. Pentru imaginile precum gradienții care nu au dimensiuni intrinseci, acesta este redat la dimensiunea zonei de poziționare a măștii.
  • initial: Aplică setarea implicită a proprietății, care este auto.
  • inherit: Adoptă valoarea mărimii măștii părintelui.
  • unset: Elimină curentul mask-sizedin element.

Folosind valori multiple

Această proprietate poate lua o listă de valori separate prin virgulă pentru dimensiunile măștii și fiecare valoare este aplicată unei imagini corespunzătoare a stratului de mască specificată în mask-imageproprietate.

În exemplul următor, prima valoare specifică dimensiunea primei imagini, a doua valoare specifică dimensiunea celei de-a doua imagini și așa mai departe.

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

autovaloarea

Dacă valoarea mask-sizeproprietății este specificată astfel auto:

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

... apoi imaginea măștii se scalează în direcțiile corespunzătoare pentru a-și menține raportul de aspect. Acestea fiind spuse, putem obține rezultate variate în funcție de dimensiunile și proporția intrinseci a imaginii.

Proporție / dimensiune Fără dimensiuni intrinseci O dimensiune intrinsecă Ambele dimensiuni intrinseci
Are proporție Redat ca și cum ar fi fost specificat în loc conținutul Redat la dimensiunea determinată de acea dimensiune și proporție Redate la acea dimensiune
Fără proporție Redat la dimensiunea zonei de poziționare a măștii Redat utilizând dimensiunea intrinsecă și dimensiunea corespunzătoare a zonei de poziționare a măștii N / A

Dacă valoarea mask-sizeeste specificată cu autoși o altă valoare non-automată, cum ar fi următoarea:

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

… atunci:

  • dacă imaginea are o proporție intrinsecă , valoarea automată se calculează utilizând dimensiunea specificată și proporția intrinsecă.
  • dacă imaginea nu are o proporție intrinsecă , valoarea automată devine dimensiunea intrinsecă corespunzătoare a imaginii dacă există și, dacă nu, auto va fi dimensiunea corespunzătoare a zonei de poziționare a măștii.

Înțelegere coverșicontain

Următorul videoclip explică modul în care funcționează cuvintele cheie conține și acoperă. Rețineți că poziția inițială a unui strat de mască este în centrul zonei de poziționare:

Dacă imaginea nu are un raport de aspect intrinsec, atunci specificând fie capacul, fie conținutul, redă imaginea măștii la dimensiunea zonei de poziționare a măștii.

Și ce naiba este o dimensiune intrinsecă și o proporție intrinsecă?

Dimensiunile intrinseci sunt lățimea și înălțimea unui element, iar proporția intrinsecă este raportul dintre ele.

  • O imagine bitmap ca un format PNG are întotdeauna dimensiuni intrinseci și o proporție intrinsecă.
  • O imagine vectorială, ca un format SVG, poate avea ambele dimensiuni intrinseci. Prin urmare, are și o proporție intrinsecă. De asemenea, poate avea una sau nicio dimensiune intrinsecă și, în ambele cazuri, poate avea sau nu o proporție intrinsecă.
  • Gradientele sunt ca niște imagini fără dimensiuni intrinseci sau proporție intrinsecă.

Suport pentru browser

IE Margine Firefox Crom Safari Operă
Nu Peste 18 ani Peste 53 de ani Toate 4+ 70
Android Chrome Android Firefox Browser Android Safari iOS Opera mini
Peste 85 de ani Peste 79 de ani 4.4+ Toate Toate
Sursa: caniuse

Demo

Următoarea demonstrație folosește o lungime pentru dimensiunea măștii. Încercați să modificați valoarea cu alte tipuri de valori din cod și verificați rezultatul.

Mai multe informatii

  • Modul de mascare CSS Nivelul 1
  • Decupare și mascare în CSS
  • Decupare vs. Mascare: Când să le folosiți pe fiecare
  • # 185: Joc cu măști CSS (video)