Maski suurus - CSS-trikid

Anonim

CSS-is määrab atribuut mask-size maskikihi pildi suuruse. Paljuski töötab see sarnaselt background-sizevarale.

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

Maskeerimine võimaldab kuvada elemendi valitud osi, varjates ülejäänud osa. Maski suurus on määratud mask-sizeatribuudiga.

Järgmises demos saate maskikihi pildi suurusega ringi mängida:

Süntaks

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Algväärtus: auto
  • Kehtib kõigi elementide kohta. SVG-s kehtib see konteinerelementidele, välja arvatud element, kõik graafikaelemendid ja element
  • Päritud: ei
  • Animatsiooni tüüp: korratav loend

Põhimõtteliselt tähendab see, et süntaks aktsepteerib tausta suuruse ( ) väärtust, mis võib olla kas üks või kaks pikkust ja / või protsenti ( ), seatud väärtusele autovõi üks kahest märksõnast ( coverja contain).

  • Kui kaks väärtust kasutatakse esimene väärtus määrab laius maski pilti ning teine väärtus määrab selle kõrgust .
  • Kui kasutatakse ühte väärtust, mis ei sisalda ega kata, määrab see maskipildi laiuse ja eeldatavasti kõrguse auto.

Väärtused

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

Väärtuste definitsioonid

  • : Suvaline kehtiv ja mittenegatiivne CSS pikkus, nagu px, em, remja %, teiste hulgas.
  • : Määrab maskikihi pildi suuruse protsentväärtusena maski positsioneerimisala suhtes, mille määrab väärtus mask-origin. Vaikimisi on see väärtus border-box, see tähendab, et see sisaldab kasti piire, polsterdusi ja sisu.
  • auto: Kasutatakse maskipildi sisemist kõrgust ja laiust ning selliste piltide nagu gradientide puhul, millel pole sisemõõtmeid, renderdatakse maski positsioneerimisala suuruses.
  • contain: Skaleerib maski pilti, säilitades samas selle sisemise proportsiooni nii, et nii laius kui ka kõrgus mahuksid maski positsioneerimisalasse. Selliste piltide jaoks nagu gradiendid, millel pole sisemõõtmeid, renderdatakse see maski positsioneerimisala suuruses.
  • cover: Maskeerib maski pilti, säilitades samas selle sisemise proportsiooni nii, et nii selle laius kui ka kõrgus suudaksid maski positsioneerimisala täielikult katta. Selliste piltide jaoks nagu gradiendid, millel pole sisemõõtmeid, renderdatakse see maski positsioneerimisala suuruses.
  • initial: Rakendab atribuudi vaikesätet, mis on auto.
  • inherit: Võtab vastu vanema maski suuruse väärtuse.
  • unset: Eemaldab voolu mask-sizeelemendist.

Mitme väärtuse kasutamine

See omadus võib võtta komadega eraldatud väärtuste loendi maski suuruste jaoks ja iga väärtus rakendatakse mask-imageatribuudis määratud vastavale maskikihi pildile .

Järgmises näites määrab esimene väärtus esimese pildi suuruse, teine ​​väärtus teise pildi suuruse jne.

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

autoväärtus

Kui mask-sizeatribuudi väärtus on määratud järgmiselt auto:

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

... siis muutub mask pildi proportsioonide säilitamiseks vastavates suundades. Sellest hoolimata võime saada erinevaid tulemusi sõltuvalt pildi sisemistest mõõtmetest ja proportsioonidest.

Proportsioon / mõõde Sisemised mõõtmed puuduvad Üks sisemine mõõde Mõlemad sisemised mõõtmed
Omab proportsiooni Renderdatakse nii, nagu oleks selle asemel sisestatud Esitatakse selle ühe dimensiooni ja proportsiooni järgi määratud suuruses Sellises suuruses renderdatud
Proportsiooni pole Esitatakse maski positsioneerimisala suuruse järgi Esitamisel kasutatakse sisemõõdet ja maski positsioneerimisala vastavat mõõdet Puudub

Kui väärtus mask-sizeon määratud autoja muu mitteautomaatne väärtus, näiteks järgmine:

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

… Siis:

  • kui pildil on sisemine proportsioon , arvutatakse automaatne väärtus määratud dimensiooni ja sisemise proportsiooni abil.
  • kui pildil pole sisemist proportsiooni , saab automaatväärtusest pildi vastav sisemine mõõde, kui see on olemas, ja kui seda pole, on auto maski positsioneerimisala vastav mõõde.

Mõistmine coverjacontain

Järgmine video selgitab, kuidas märksõnad sisaldada ja hõlmata toimivad. Pange tähele, et maskikihi algpositsioon on positsioneerimisala keskel:

Kui pildil pole sisemist kuvasuhet, siis kas katte või sisalduse määramine muudab maski pildi maski positsioneerimisala suuruseks.

Ja mida kuradit on sisemine mõõde ja sisemine proportsioon?

Sisemõõdud on elemendi laius ja kõrgus ning sisemine proportsioon on nende suhe.

  • Bittkaardil, nagu PNG-vorming, on alati sisemõõtmed ja sisemine proportsioon.
  • Vektor pilti nagu SVG formaat olla nii sisemised mõõtmed. Seetõttu on sellel ka oma osa. Sellel võib olla ka üks olemuslik mõõde või mitte ja mõlemal juhul võib see olla sisemine proportsioon või mitte.
  • Gradiendid on nagu pildid, millel pole sisemõõtmeid ega sisemist proportsiooni.

Brauseri tugi

IE Edge Firefox Chrome Safari Ooper
Ei 18+ 53+ Kõik 4+ 70
Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mini
85+ 79+ 4.4+ Kõik Kõik
Allikas: caniuse

Demo

Järgmine demo kasutab maski suuruse jaoks pikkust. Proovige muuta koodis muud tüüpi väärtused ja kontrollige tulemust.

Rohkem informatsiooni

  • CSS-i maskeerimismoodul 1. tase
  • Lõikamine ja maskeerimine CSS-is
  • Lõikamine vs maskeerimine: millal neid kasutada
  • # 185: CSS-maskidega mängimine (video)