Kaukė-padėtis - CSS-gudrybės

Anonim

CSS mask-positionypatybė nurodo pradinę kaukės sluoksnio vaizdo padėtį, palyginti su kaukės padėties sritimi. Tai veikia kaip background-positionturtas.

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

Užmaskavimas leidžia rodyti pasirinktas elemento dalis, o paslėpti likusias. Šioje demonstracijoje galite pakeisti kaukės sluoksnio vaizdo padėtį:

Sintaksė

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Pradinė vertė: 0% 0%
  • Taikoma: visiems elementams. SVG jis taikomas konteinerio elementams, išskyrus elementą, visus grafinius elementus ir elementą.
  • Paveldima: ne
  • Apskaičiuota vertė: susideda iš: dviejų raktinių žodžių, žyminčių kilmę, ir dviejų tos kilmės kompensacijų, kurių kiekvienas nurodomas kaip absoliutus ilgis (jei nurodoma a ), kitaip procentais.
  • Animacijos tipas: pakartojamas sąrašas

Vertybės

Gali būti nurodyta prasme kompensuoti raktažodžius ( top, left, bottom, right, ir center), procentais, ir ilgis vertės dėl elemento, panašus į CSS kraštus background-positionturtą.

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

Vertės apibrėžimai

  • : Bet CSS ilgis (pavyzdžiui px, em, remir %, be kita ko), kuri bus nurodyta, kiek kaukės įvaizdžio kraštas yra iš atitinkamo krašto elemento.
  • : Nurodo kaukės sluoksnio vaizdo padėtį procentine verte, palyginti su kaukės padėties plotu atėmus kaukės vaizdo dydį.
  • top: Lygi 0% vertikaliai padėčiai.
  • right: Lygi 100% horizontaliai padėčiai.
  • bottom: Atitinka 100% vertikalios padėties.
  • left: Lygi 0% horizontaliai padėčiai.
  • center: Lygi 50% horizontaliai padėčiai, jei horizontali padėtis nenurodyta kitaip, arba 50% vertikaliai padėčiai, jei ji yra.
  • initial: Taiko numatytąjį nuosavybės nustatymą, kuris yra 0% 0%.
  • inherit: Priima mask-positiontėvų vertę.
  • unset: Pašalina srovę mask-positioniš elemento.

Naudojant kelias reikšmes

Ši ypatybė gali sudaryti kableliais atskirtą kaukių pozicijų verčių sąrašą, o kiekviena reikšmė taikoma atitinkamam mask-imageypatybėje nurodytam kaukės sluoksnio vaizdui . Toliau pateiktame pavyzdyje pirmoji reikšmė nurodo pirmojo vaizdo padėtį, antroji reikšmė nurodo antrojo vaizdo padėtį ir pan.

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

Skirtinga sintaksė

mask-position gali nurodyti vieną, dvi, tris ar keturias reikšmes, kad nurodytumėte kaukės sluoksnio padėtį horizontaliai ir vertikaliai.

Viena vertė

Jei nustatoma viena vertė , tai laikoma horizontalia ir laikoma vertikalia verte center.

mask-position: 100px; /* 100px center */
Dvi vertybės

Naudojant porų reikšmes, pirmoji laikoma horizontalia, o antroji nurodo vertikaliai padaro sluoksnio padėtį.

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

Jei abi reikšmės yra raktiniai žodžiai, raktinių žodžių tvarka nėra svarbi:

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

Bet kai turime raktinių žodžių ir ilgio ar procentų derinį, tvarka yra svarbi, o pirmoji vertė visada atitinka horizontalųjį poslinkį. Todėl:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Trys vertybės

Jei pateikiamos trys vertės, laikoma, kad trūkstamas poslinkis yra lygus nuliui:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Keturios vertybės

Keturių reikšmių sintaksė leidžia nurodyti, kurių elemento pusių atžvilgiu kaukę išdėstote (1 ir 3 reikšmės), o tada atstumą nuo tų pusių (2 ir 4 reikšmės).

Taigi, jei norite pastatyti kaukę 100 taškų iš elemento apačios ir 200 taškų iš dešinės, galite tai padaryti taip:

mask-position: bottom 100px right 200px;

Animacinės kaukės

Galima animuoti kaukės padėtį ir mask-sizenaudojant pagrindinio kadro animaciją bei CSS perėjimą, pavyzdžiui:

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

Šioje kitoje demonstracijoje mes animuojame kaukės sluoksnio padėtį naudodami pagrindinio kadro animaciją:

Demonstracija

Pakeiskite šio mask-positiondemonstracinio elemento vertę :

Naršyklės palaikymas

T.Y Briauna „Firefox“ „Chrome“ „Safari“ Opera
Ne 18+ 53+ 4+ 3.2+ 15+
„Android Chrome“ „Android Firefox“ „Android“ naršyklė „iOS Safari“ „Opera Mobile“
85+ 79+ 2.1+ 3.2+ 59+
Šaltinis: caniuse

Daugiau informacijos

  • 1 lygio CSS maskavimo modulis (redaktoriaus juodraštis)
  • Karpymas ir maskavimas CSS
  • Karpymas prieš maskavimą: kada naudoti kiekvieną
  • # 185: Žaidimas naudojant CSS kaukes (vaizdo įrašas)