Maszk-helyzet - CSS-trükkök

Anonim

A CSS-ben a mask-positiontulajdonság megadja a maszk réteg képének kezdeti helyzetét a maszk pozíció területéhez viszonyítva. Úgy működik, mint az background-positioningatlan.

.element ( mask-image: url("star.svg"); mask-position: 20px center; )

A maszkolás lehetővé teszi az elem kiválasztott részeinek megjelenítését, miközben a többit elrejti. A következő bemutatóban megváltoztathatja a maszkréteg képének helyzetét:

Szintaxis

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Kezdő érték: 0% 0%
  • Alkalmazható: minden elem. Az SVG-ben a konténerelemekre vonatkozik, kivéve az elemet, az összes grafikai elemet és az elemet.
  • Örökölt: nem
  • Számított érték: áll: két, az eredetet képviselő kulcsszóból és az ebből származó két eltolásból, mindegyiket abszolút hosszúságként (ha a ) értékként adjuk meg , egyébként százalékban.
  • Animáció típusa: ismételhető lista

Értékek

A megadható szempontjából ofszet kulcsszavak ( top, left, bottom, right, és center), százalék és hosszértékek kapcsolatos szélei elem, hasonló a CSS background-positiontulajdonság.

/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center; 
 /* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh; 
 /* Percentage values */ mask-position: 25% 50%; 
 /* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;

Értékdefiníciók

  • : Bármely érvényes CSS hossza (például px, em, remés %, többek között), amely meghatározza, hogy milyen messze szélén a maszk a kép a megfelelő él az elem.
  • : Megadja a maszkréteg képének pozícióját százalékos értékként a maszk pozícionálási területéhez viszonyítva, mínusz a maszk kép méretével.
  • top: A függőleges helyzet 0% -ának felel meg.
  • right: 100% -nak felel meg a vízszintes helyzetben.
  • bottom: Megegyezik a függőleges helyzet 100% -ával.
  • left: A vízszintes helyzet 0% -ának felel meg.
  • center: 50% -nak felel meg vízszintes helyzet esetén, ha a vízszintes helyzet nincs másképpen meghatározva, vagy 50% -kal függőleges helyzet esetén, ha van.
  • initial: A tulajdonság alapértelmezett beállítását alkalmazza, amely 0% 0%.
  • inherit: Elfogadja mask-positiona szülő értékét.
  • unset: Eltávolítja az áramot mask-positionaz elemtől.

Több érték használata

Ez a tulajdonság vesszővel elválasztott értéklistát készíthet a maszkpozíciókról, és mindegyik értéket a mask-imagetulajdonságban megadott megfelelő maszkréteg-képre alkalmazzák . A következő példában az első érték meghatározza az első kép helyzetét, a második érték a második kép helyzetét stb.

.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )

Különböző szintaxis

mask-position egy, kettő, három vagy négy értéket vehet fel a maszkréteg vízszintes és függőleges helyzetének meghatározásához.

Egyetlen érték

Ha egyetlen értéket állítunk be, akkor ezt vízszintes értéknek vesszük, és a függőleges értéket feltételezzük center.

mask-position: 100px; /* 100px center */
Két érték

Párértékek használata esetén az elsőt vízszintes értéknek vesszük, a második pedig a gyártóréteg függőleges helyzetét határozza meg.

mask-position: 10% 50%; /* x=10%, Y=50% */

Ha mindkét érték kulcsszó, akkor a kulcsszavak sorrendje nem releváns:

mask-position: top left; /* = left top */

De amikor kulcsszó és hosszúság vagy százalék kombinációja van, akkor a sorrend számít, és az első érték mindig megfelel a vízszintes eltolásnak. Ezért:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Három érték

Három érték megadása esetén feltételezzük, hogy a hiányzó eltolás nulla:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Négy érték

A négyértékű szintaxissal megadhatja, hogy az elem melyik oldalához helyezze a maszkot (1. és 3. érték), majd az ezektől az oldalaktól mért távolságot (2. és 4. érték).

Tehát, ha a maszkot 100px-re szeretné elhelyezni az elem aljától és 200px-t jobbról, akkor a következőket teheti:

mask-position: bottom 100px right 200px;

Animáló maszkok

Animálható a maszkpozíció, valamint mask-sizea kulcsképes animáció és a CSS-áttérés, például a következők:

.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; ) 
 .element:hover ( mask-position: right 10px bottom 10px; )

Ebben a következő bemutatóban a maszkréteg helyzetét animáljuk kulcsképes animáció segítségével:

Demó

Módosítsa a mask-positionkövetkező demo értékét :

Böngésző támogatás

AZAZ Él Firefox Króm Szafari Opera
Nem 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Android böngésző iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Forrás: caniuse

Több információ

  • CSS maszkolási modul, 1. szint (a szerkesztő tervezete)
  • 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ó)