Maszkméret - CSS-trükkök

Anonim

A CSS-ben a mask-size tulajdonság megadja a maszk réteg képének méretét. Sok szempontból nagyon hasonlóan működik, mint az background-sizeingatlan.

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

A maszkolás lehetővé teszi az elem kiválasztott részeinek megjelenítését, miközben a többit elrejti. A maszk méretét a mask-sizetulajdonság határozza meg .

A következő bemutatóban a maszkréteg képének méretével játszhatsz:

Szintaxis

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Kezdeti érték: auto
  • A következőkre vonatkozik: Minden elem. Az SVG-ben a konténerelemekre vonatkozik, kivéve az elemet, az összes grafikai elemet és az elemet
  • Örökölt: nem
  • Animáció típusa: ismételhető lista

Ez alapvetően azt mondja, hogy a szintaxis elfogad egy háttérméret ( ) értéket, amely lehet egy vagy két hosszúság és / vagy százalék ( ), beállítva autovagy két kulcsszó ( coverés contain) egyike .

  • Ha a két érték alkalmazunk, az első érték a szélessége a maszk kép, a második érték megadja annak magasságát .
  • Ha egy olyan értéket használ, amely nem tartalmaz vagy borít, akkor az meghatározza a maszk kép szélességét, és a magasságot feltételezzük auto.

Értékek

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

Értékdefiníciók

  • : Bármely érvényes és nem negatív CSS hosszúságú, például px, em, remés %, többek között.
  • : Megadja a maszkréteg képének százalékos értékét a maszk pozícionálási területéhez viszonyítva, amelyet a mask-origin. Alapértelmezés szerint ez az érték azt border-boxjelenti, hogy tartalmazza a keret szegélyét, kitöltését és a doboz tartalmát.
  • auto: A maszk kép belső magasságát és szélességét használják, és olyan képekhez, mint a színátmenetek, amelyeknek nincs belső mérete, a maszk pozícionálási területének méretében renderelik.
  • contain: Méretezi a maszk képét, miközben megőrzi belső arányát oly módon, hogy mind a szélessége, mind a magassága elférjen a maszk elhelyezési területén belül. Az olyan képeknél, mint a színátmenetek, amelyeknek nincs belső méretük, a maszk pozícionálási területének méretében kerül megjelenítésre.
  • cover: Méretezi a maszk képét, miközben megőrzi belső arányát oly módon, hogy mind a szélessége, mind a magassága teljes mértékben el tudja fedni a maszk helyzetét. Az olyan képeknél, mint a színátmenetek, amelyeknek nincs belső méretük, a maszk pozícionálási területének méretében kerül megjelenítésre.
  • initial: A tulajdonság alapértelmezett beállítását alkalmazza auto.
  • inherit: Elfogadja a szülő maszkméret értékét.
  • unset: Eltávolítja az áramot mask-sizeaz elemtől.

Több érték használata

Ez a tulajdonság vesszővel elválasztott értéklistát készíthet a maszkméretekről, és mindegyik értéket a mask-imagetulajdonságban megadott megfelelő maszk réteg képre alkalmazzák .

A következő példában az első érték az első kép méretét, a második érték a második kép méretét és így tovább.

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

Az autoérték

Ha a mask-sizetulajdonság értékét a következőként adják meg auto:

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

... akkor a maszk kép a megfelelő irányokba skálázódik, hogy megőrizze képarányát. Ennek ellenére különböző eredményeket kaphatunk a kép belső méreteitől és arányától függően.

Arány / dimenzió Nincs belső mérete Egy belső dimenzió Mindkét belső dimenzió
Van aránya Úgy renderelve, mintha helyette lett volna megadva a tartalmazza Az egy dimenzió és az arány által meghatározott méretben jelenik meg Ekkora méretben jelenik meg
Nincs arány A maszk pozícionálási területének méretében jelenik meg A belső méret és a maszk pozícionálási területének megfelelő dimenziója alapján renderelt N / A

Ha a (z) értékét mask-sizeegy autoés egy másik nem automatikus értékkel adjuk meg, például a következőket:

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

… azután:

  • ha a képnek belső aránya van , akkor az automatikus érték kiszámítása a megadott dimenzió és a belső arány felhasználásával történik.
  • ha a képnek nincs belső aránya , akkor az automatikus érték a kép megfelelő belső dimenziójává válik, ha létezik, és ha nem, akkor az auto lesz a maszk pozícionálási területének megfelelő dimenziója.

Megértése coveréscontain

A következő videó elmagyarázza, hogyan működnek a tartalmazzák és lefedik kulcsszavak. Vegye figyelembe, hogy a maszkréteg kezdeti helyzete a pozícionálási terület közepén van:

Ha a képnek nincs belső képaránya, akkor a borító vagy a tartalom megadásával a maszk képe a maszk pozícionálási területének méretével jelenik meg.

És mi a fene egy belső dimenzió és belső arány?

A belső méretek az elem szélessége és magassága, a belső arány pedig az arányuk.

  • A PNG formátumú bitképek mindig belső dimenziókkal és belső arányokkal rendelkeznek.
  • Az olyan vektorképeknek, mint az SVG formátum, mindkét belső mérete lehet. Ezért belső aránya is van. Lehet, hogy egy belső dimenziója van, vagy nincs, és mindkét esetben lehet, hogy nincs belső aránya.
  • A színátmenetek olyanok, mint a képek, amelyek nem tartalmaznak belső méreteket vagy belső arányokat.

Böngésző támogatás

AZAZ Él Firefox Króm Szafari Opera
Nem 18+ 53+ Összes 4+ 70
Android Chrome Android Firefox Android böngésző iOS Safari Opera Mini
85+ 79+ 4.4+ Összes Összes
Forrás: caniuse

Demó

A következő bemutató hosszat használ a maszk méretéhez. Próbálja meg megváltoztatni az értéket más típusú értékekre a kódban, és ellenőrizze az eredményt.

Több információ

  • CSS maszkolási modul 1. szint
  • Nyírás és maszkolás a CSS-ben
  • Vágás és maszkolás: mikor kell használni mindegyiket
  • # 185: Játék CSS maszkokkal (videó)