Naamioasento - CSS-temppuja

Anonim

CSS: ssä mask-positionominaisuus määrittää maskikerroksen kuvan alkuperäisen sijainnin maskin sijaintialueeseen nähden. Se toimii kuten background-positionomaisuus.

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

Peittäminen antaa sinun näyttää elementin valitut osat piilottaen loput. Seuraavassa esittelyssä voit muuttaa maskikerroksen kuvan sijaintia:

Syntaksi

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Alkuarvo: 0% 0%
  • Koskee kaikkia elementtejä. SVG: ssä se koskee konttielementtejä, lukuun ottamatta elementtiä, kaikkia graafisia elementtejä ja elementtiä.
  • Peritty: ei
  • Laskettu arvo: joka koostuu kahdesta alkuperää edustavasta avainsanasta ja kahdesta kyseisen alkuperän siirtymästä, jotka molemmat annetaan absoluuttisina pituutena (jos a ), muuten prosentteina.
  • Animaation tyyppi: toistettava luettelo

Arvot

Voidaan määritellä kannalta offset avainsanat ( top, left, bottom, right, ja center), prosentit, ja pituus arvot koskevat elementin reunoihin, samanlainen CSS background-positionomaisuutta.

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

Arvomääritelmät

  • : Mikä tahansa kelvollinen CSS pituus (kuten px, em, remja %mm), joka määrittää, kuinka paljon reunaan maskin kuva on vastaavasta elementin reunasta.
  • : Määrittää maskikerroksen kuvan prosenttiarvona suhteessa maskin sijoitusalaan miinus maskikuvan koko.
  • top: Vastaa 0% pystyasennolle.
  • right: Vastaa 100% vaaka-asennossa.
  • bottom: Vastaa 100% pystyasennolle.
  • left: Vastaa 0% vaakasuorassa asennossa.
  • center: Vastaa 50% vaaka-asennolle, jos vaakasuoraa asemaa ei ole muuten määritelty, tai 50% pystysuoralle sijainnille, jos se on.
  • initial: Asettaa kiinteistön oletusasetuksen, joka on 0% 0%.
  • inherit: Hyväksyy mask-positionvanhemman arvon.
  • unset: Poistaa virran mask-positionelementistä.

Useiden arvojen käyttö

Tämä ominaisuus voi ottaa pilkulla erotetun arvoluettelon maskien sijainnille, ja jokainen arvo lisätään vastaavaan mask-imageominaisuudessa määritettyyn maskikerroksen kuvaan . Seuraavassa esimerkissä ensimmäinen arvo määrittelee ensimmäisen kuvan sijainnin, toinen arvo määrittää toisen kuvan sijainnin ja niin edelleen.

.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; )

Erilainen syntakse

mask-position voi ottaa yhden, kaksi, kolme tai neljä arvoa maskikerroksen sijainnin määrittämiseksi vaaka- ja pystysuunnassa.

Yksi arvo

Jos asetetaan yksi arvo , se katsotaan vaaka-arvoksi ja vertikaaliarvoksi oletetaan center.

mask-position: 100px; /* 100px center */
Kaksi arvoa

Jos käytetään pariarvoja, ensimmäinen otetaan vaaka-arvoksi, ja toinen määrittelee merkkikerroksen sijainnin pystysuunnassa.

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

Jos molemmat arvot ovat avainsanoja, avainsanojen järjestyksellä ei ole merkitystä:

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

Mutta kun meillä on avainsanan ja pituuden tai prosenttiosuuden yhdistelmä, järjestyksellä on merkitystä ja ensimmäinen arvo vastaa aina vaakasuuntaista siirtymää. Siksi:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Kolme arvoa

Jos annetaan kolme arvoa, oletetaan, että puuttuva siirtymä on nolla:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Neljä arvoa

Neljän arvon syntaksin avulla voit määrittää, mitkä elementin sivut sijoitat maskin suhteessa (arvot 1 ja 3), ja sitten etäisyys näistä sivuista (arvot 2 ja 4).

Joten, jos haluat sijoittaa maskin 100 kuvapistettä elementin alaosasta ja 200 kuvapistettä oikealta, voit tehdä seuraavaa:

mask-position: bottom 100px right 200px;

Animoidut naamiot

On mahdollista animoida maskin sijainti ja mask-sizekäyttää avainkehysanimaatiota ja CSS-siirtymistä, kuten seuraava:

.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; )

Tässä seuraavassa esittelyssä animoimme maskikerroksen sijainnin avainkehysanimaatiolla:

Demo

Muuta arvon mask-positionseuraavassa esittelyssä:

Selaimen tuki

IE Reuna Firefox Kromi Safari Ooppera
Ei 18+ 53+ 4+ 3.2+ 15+
Android Chrome Android Firefox Android-selain iOS Safari Opera Mobile
85+ 79+ 2.1+ 3.2+ 59+
Lähde: caniuse

Lisää tietoa

  • CSS-peitemoduuli, taso 1 (toimittajan luonnos)
  • Leikkaaminen ja peittäminen CSS: ssä
  • Leikkaus vs. peittäminen: milloin niitä käytetään
  • # 185: CSS-naamareilla pelaaminen (video)